React Category SDK

The Depict Category Page UI React SDK enables seamless integration of Depict Category Page UI into your React web applications. With our developer-friendly components and wrappers, you can effortlessly render all product categories to your eCommerce website.

React component API

The SDK is pre-built with React components and wrappers, making it a perfect fit for React.js and Next.js web applications. The following sections describe these components and their configuration.

The `DepictProvider` component

The DepictProvider is a wrapper component for the root component of your entire application. It provides configuration to all Depict UI components beneath it.

return (
   <DepictProvider
     merchant="MERCHANT_ID"
     market="MARKET_IDENTIFIER"
   >
     <div className="App">
      ...
     </div>
   </DepictProvider>
 );

The following table shows all DepictProvider configuration properties, their types, and descriptions:

Props	Type	Default	Description
`merchant`	`string`		This is the unique merchant identifier given by Depict.
`market`	`string`		This specifies the market identifier.
`search`	`object`		Configuration object lets you customize your website's search parameters.
`locale`	`object`	`en`	This handles the Depict Search UI translations and price formatting, gotten from the Depict locale object.
`navigateFunction`	function `(href: string) => void`		This function will be used internally by our components to navigate between Depict Search UI pages. This prop is required in all applications that don’t use Next.JS
`userId`	`string`		Identifies a logged in user, if applicable
`metaData`	`object`		A `<string, string>` map of custom metadata to include in API requests to Depict

The `DepictCategoryPage` component

The DepictCategoryPage component renders your site's different product category pages.

 return (
    <div>
      <DepictCategoryPage
        categoryId="CATEGORY_IDENTIFIER"
        productCard={ProductCard}
        columnsAtSize={[[4], [3, 1024], [2, 901]]}
      />
    </div>
  );

The following table shows all DepictProvider configuration properties, their types, and descriptions:

Props	Type	Default	Description
`categoryId`	`string`		The category identifier for your products as defined in the data sent to Depict.
`categoryTitlePlugin`	`function`	`CategoryTitle`	This is an optional plugin that can be used to customize the title of the category page.
`productCard`	`React.Element<typeof Component>`		The React component to use for rendering products.
`columnsAtSize`	`array`	`[[2,901],[3,1024],[4]]`	Used to customize breakpoints on product category pages. Handles the number of product card columns displayed at each screen size.
`gridSpacing`	`string` \| `{ horizontal: string; vertical: string }`	`2%`	The spacing between products.
`showBreadcrumbs`	`boolean`	`true`	Handles whether or not to show the default breadcrumbs on the category page.
`showQuicklinks`	`boolean`	`true`	Handles whether or not to show the default quick links on the category page.

The `BreadCrumbs` component

Breadcrumb navigation helps users know their location in the category tree by providing a trail back to the root category. Use the BreadCrumbs component to handle the "trail" for navigating category hierarchies on the category page.

 return (
   <div> 
    <BreadCrumbs />
   </div>
  );

The `QuickLinks` component

The QuickLinks component shows all available product categories in a carousel for easy navigation. Embed the component in the desired location on your DOM tree.

 return (
  <div> 
   <QuickLinks />
  </div>
  );

The `ImagePlaceholder` component

This component renders a lightweight placeholder while your product data loads. Modify this component to replicate the dimensions of your actual product card.

if (!productData) {
    return <ImagePlaceholder aspectRatio={3 / 4} />
 }

The following table shows the ImagePlaceholder configuration properties, their types, and descriptions:

Prop	Type	Default	Description
`aspectRatio`	number	`null`	This property represents the aspect ratio of the image or product card to be displayed.

The `TextPlaceholder` component

This component renders a lightweight placeholder while your product data loads. Modify this component to replicate the dimensions of your actual product text data.

if (!productData) {
    return <TextPlaceholder width="30rem" height="17px" />
 }

The following table shows the TextPlaceholder configuration properties, their types, and descriptions:

Props	Type	Default	Description
`width`	`string`	`null`	This property represents the width of the text to be displayed.
`height`	`string`	`null`	This property defines the height of the text to be displayed.

React component API

The DepictProvider component

The DepictCategoryPage component

The BreadCrumbs component

The QuickLinks component