React SDK

The Depict UI React SDK enables seamless integration of Depict Search UI into your React web applications. With our developer-friendly components and wrappers, you can effortlessly add powerful search functionality to your eCommerce website.

The Depict search modal

The Depict search modal is the component that captures users' queries in a text field. This component is triggered when either of the following events occurs:

• The open callback function, returned by the useDepictSearchModal hook, is called.
• When a click event occurs on the DepictSearchField component.
  In both cases, you can align the top of the modal to the top of another DOM element by using the alignerRef property.

📘

Modal alignment on smaller screens

When the viewport height is below 900px, the search modal will overlook the element reference passed to the alignerRef property and center the search modal to the top of the viewport.

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"
     search={{
       searchPagePath: "SEARCH_RESULTS_PAGE_PATH",
     }}
   >
    <div className="App">
     ...
    </div>
   </DepictProvider>
);

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

The search property on the DepictProvider wrapper is a configuration object that allows you to modify search parameters on your website. Use the config to tailor your search URL and behavior. The following table shows the search object's configuration properties:

The useSearchField hook

Use the useSearchField hook to render a search field on your site. The destructured value is the SearchField component to be nested within your application.
The SearchField component displays a search field that opens the Depict search modal.

SearchField with the modal aligned to the search field

import React from "react";
import { useSearchField } from "@depict-ai/react-ui";

const App = () => {
  const { SearchField } = useSearchField();

  return (
    <div>
      <SearchField />
    </div>
  );
};

SearchField with the modal aligned to another DOM element

import React from "react";
import { ComponentAligner, useSearchField } from "@depict-ai/react-ui";

const App = () => {
  const ref = useRef(null);
  const { SearchField } = useSearchField({
    alignerRef: ref
  });

  return (
    <div>
      <ComponentAligner ref={ref} />
      <SearchField />
    </div>
  );
};

The following table shows the useSearchField hook's configuration properties, their types, and descriptions:

The useSearchModal hook

Use the useSearchModal hook in place of the SearchField component to dynamically open the search modal.

const { open } = useSearchModal({
  location: "centered",
});

The destructured value is a function that opens the modal in response to user events. For example:

return (
 <div>
   <button onClick={open}>Search</button>
 </div>
);

The following table shows the useSearchModal hook's configuration properties, their types, and descriptions:

The SearchPage component

The SearchPage component acts as the search results page on your site. It is responsible for rendering results from each search.

import SearchProductCard from './SearchProductCard.js';

export default function SearchResultsPage() {

 return (
  <SearchPage
    productCard={SearchProductCard}
    columnsAtSize={[[1, 500], [2, 1000], [3]]}
  />
 );
}

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

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:

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: