---
title: "PageWidgetsProvider"
slug: "pagewidgetsprovider"
abstract: "Details of the PageWidgetsProvider component in Sitecore Discover JS SDK for React."
---
# 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.

<details>
<summary><h2>Import path</h2></summary>

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

</details>

<details>
<summary><h2>Example</h2></summary>

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.

```js
<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

```js
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;
```

</details>