Setup
Configuring `DepictProvider`
Import the DepictProvider
component from the installed package and use this component to wrap your entire application’s component tree as shown:
import { DepictProvider } from "@depict-ai/react-ui";
import { en } from "@depict-ai/react-ui/locales";
import { YourDisplay } from "./display-types.ts"
function App() {
return (
<DepictProvider<YourDisplay>
// Wondering what your MERCHANT_ID is? Depict engineers aren't very creative here, so you can probably guess. Odds are it's your company name or an abbreviation thereof, all lower case and only a-z or 1-9. Ask us if you can't get it working.
merchant="MERCHANT_ID"
// Wondering what your MARKET(s) is/are? Me too. Ask a depict engineer or try something like `se-sv`, `se-sv_SE` or `se`.
market="MARKET"
// The `locale` property on the `DepictProvider` wrapper accepts a JavaScript object that handles UI translations and price formatting. Import our supported locales from the `@depict-ai/react-ui/locales` subpackage, extend them or write your own.
locale={en}
// userId={"USER_ID"} // <- if users are logged in and you have a user id for them, provide it here. Otherwise, omit this property.
>
<div className="App">
...
</div>
</DepictProvider>
);
}
export default App;
We call the product data that you receive for each product card that you have to render display
.
YourDisplay
is a type definition of your specific display. Please ask Depict for this.
Review the types or the reference to see what you can configure on DepictProvider.
If you’re seeing a type error after providing YourDisplay, don’t fret and go to the next step
Was this page helpful?