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
DepictProvider
componentThe 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
DepictCategoryPage
componentThe 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
BreadCrumbs
componentBreadcrumb 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
QuickLinks
componentThe 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
ImagePlaceholder
componentThis 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
TextPlaceholder
componentThis 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. |
Updated 19 days ago