React UI Reference
Reference of the depict Recommendations React components
Functions are exported from @depict-ai/react-ui.
RecommendationSlider component
Renders a slider of product cards, to be used for displaying recommendations.
See this guide for how to fetch recommendations to provide as recommendations.
The following table shows the RecommendationSlider’s configuration properties, their types, and descriptions:
A promise resolving to an array of recommendations.
The React component to use for rendering products.
How many columns to show at each media size.
The spacing between products.
RecommendationGrid component
Renders a grid of product cards, to be used for displaying recommendations.
See this guide for how to fetch recommendations to provide as recommendations.
The following table shows the RecommendationGrid’s configuration properties, their types, and descriptions:
A promise resolving to an array of recommendations/displays.
The React component to use for rendering products.
The spacing between the product cards.
The number of rows to limit the grid to. Won’t work if columnsAtSize is an empty array as it is used to calculate the number of rows dynamically depending on screen size.
How many columns to show at each media size. For example, [[2, 901], [3, 1024], [4]] means 2 columns at sizes up to 901px, 3 columns at sizes up to
1024px and after that 4 columns at any viewport size.
Optional configuration for the view more button. If unset, all products will be shown by default. Otherwise, a view more button with the given text will be shown. With the properties startRows and rowsPerClick, you can configure how many rows should be shown initially and how many rows should be added on each click.
Looking for a translation for the view more button? The locales exported from
@depict-ai/react-ui/locales should have a view_more_ property that you can
use.
Was this page helpful?