Components

PageWidgetsProvider

To use a custom selector of widget components, wrap the selector with PageWidgetsProvider before adding it to the root provider of your React application integrated with the Sitecore Discover platform.

For the page URL, use the usePageWidgets query hook in your selector component, and pass it through the withPageWidgets function.

Import path

import { PageWidgetsProvider } from '@sitecore-discover/react';

Example

The following code block shows the WidgetsProvider component with credentials for authentication when your domain is not set up with Discover.

Note

In the following code block, publicSuffix has been set to true because the top-level domain of this implementation restricts cookies.

header_ps and footer_rec are configured to appear on all pages in the CEC.

<WidgetsProvider
    publicSuffix='true'
    env='<environment>'
    customerKey='<customer key>'
    apiKey='<api key>'
    useToken
    >

   <header>
      <h1>My App</h1>
      <PreviewSearch rfkId="header_ps" />
   </header>
          
   <div class="content">
      <PageWidgetsProvider>
          <MyCustomPageWidgets />
      </PageWidgetsProvider>
   </div>
          
   <footer>
      <RecommendationWidget rfkId="footer_rec" />
   </footer>

</WidgetsProvider>

CustomPageWidgets

import { usePageWidgets, Widget, withPageWidgets } from "@sitecore-discover/react";
import MySDKSearchResultsComponent from './widget_ui_components/mySDKSearchResultsComponent';

const Loader = () => {
  return <div className="loader">
    Loading...
  </div>
}

const CustomPageWidgets = () => {
  const { isLoading, data: widgets = [] } = usePageWidgets();
  return (
  <>
    {isLoading && <Loader />}
    {!isLoading && widgets.map((rfkId) => {
      if (rfkId === 'rfkid_1') {
        return <MySDKSearchResultsComponent rfkId={rfkId} />
      }
      return <Widget rfkId={rfkId} />;
    }) }
  </>);
};
const MyCustomPageWidgets = withPageWidgets(CustomPageWidgets);
export default MyCustomPageWidgets;

If you have suggestions for improving this article, let us know!