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
RequestResponse
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.
RequestResponse
<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
RequestResponse
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;