GuidesAPI Reference
Home

React SDK

Learn about our React SDK, its components and configuration.

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:

PropsTypeDefaultDescription
merchantstringThis is the unique merchant identifier given by Depict.
marketstringThis specifies the market identifier.
searchobjectConfiguration object lets you customize your website's search parameters.
localeobjectenThis handles the Depict Search UI translations and price formatting, gotten from the Depict locale object.
navigateFunctionfunction
(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
userIdstringIdentifies a logged in user, if applicable
metaDataobjectA <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:

PropsTypeDefaultDescription
categoryIdstringThe category identifier for your products as defined in the data sent to Depict.
categoryTitlePluginfunctionCategoryTitleThis is an optional plugin that can be used to customize the title of the category page.
productCardReact.Element<typeof Component>The React component to use for rendering products.
columnsAtSizearray[[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.
gridSpacingstring | { horizontal: string; vertical: string }2%The spacing between products.
showBreadcrumbsbooleantrueHandles whether or not to show the default breadcrumbs on the category page.
showQuicklinksbooleantrueHandles 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:

PropTypeDefaultDescription
aspectRationumbernullThis 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:

PropsTypeDefaultDescription
widthstringnullThis property represents the width of the text to be displayed.
heightstringnullThis property defines the height of the text to be displayed.