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