---
title: "withPageWidgets function"
slug: "withpagewidgets-function"
abstract: "Details of the withPageWidgets high order function in Sitecore Discover JS SDK for React."
---
# withPageWidgets function

Use the `withPageWidgets` high order function to configure a widget component of widget components that renders based on page URL.

## Import path

```js
import withPageWidgets from '@sitecore-discover/react';
```

## Arguments

| Name | Description |
| --- | --- |
| `rfkId` | String ID configured in the CEC. |
| `widget` | See following widget object schema. |

### Widget object

| Name | Description |
| --- | --- |
| `component` | UI component to be configured into widget component |
| `type` | Enumerator for widget type with following values:<br><br>`WidgetDataType.RECOMMENDATION`, `WidgetDataType.PREVIEW_SEARCH` , or `WidgetDataType.SEARCH_RESULTS` |

## Example

```js
import { Widget, usePageWidgets, withPageWidgets } from "@sitecore-discover/react";
import MyGlobalPreviewSearchWidget from "./widget_components/myGlobalPreviewSearchWidget";
import MyGlobalRecommendationWidget from "./widget_components/myGlobalRecommendationWidget";

import MySDKSearchResultsComponent from "./widgets_ui_components/mySDKSearchResultsComponent";

const MySDKSearchResultsWidget = setWidgetType(MySDKSearchResultsComponent, WidgetDataType.SEARCH_RESULTS);

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

const CustomPageWidgets = () => {
  const { isLoading, data: widgets = [] } = usePageWidgets();
  return (
  <>
    {isLoading && <Loader />}
    {!isLoading && widgets.map((rfkId) => {
      if (rfkId === 'sdk_search') {
        return <MySDKSearchResultsWidget rfkId={rfkId} />
      }
      return <Widget rfkId={rfkId} />;
    }) }
  </>);
};

const MyCustomWidget = withPageWidgets(CustomPageWidgets);

const Root = () => {
    return (
          <WidgetsProvider
                publicSuffix='true'
                env='<environment>'
                customerKey='<customer key>'
                apiKey='<api key>'
                useToken >

            <header>
              <h1>My Application</h1>
              <MyGlobalPreviewSearchWidget rfkId="header_ps" />
            </header>

            <div class="content">
                <MyCustomWidget />
            </div>

            <footer>
                <MyGlobalRecommendationWidget rfkId="footer_rec" />
            </footer>

          </WidgetsProvider>
)};
```