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

Use the `widget` high order function to configure UI components into widget components that can be added to the `WidgetsProvider` component.

## Import path

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

## Arguments

| Name | Description |
| --- | --- |
| `ui_component` | UI component to be configured into widget component |
| `type` | Enumerator constants for widget type with the following values:<br><br>`WidgetDataType.RECOMMENDATION`, `WidgetDataType.PREVIEW_SEARCH` , or `WidgetDataType.SEARCH_RESULTS` |
| `enitye` | Name of entity represented in the data source or results displayed in the widget. This can be found in the CEC. |

## Example

```js
import { WidgetsProvider, WidgetDataType, widget } from '@sitecore-discover/react';
import MyGlobalPreviewSearch from "./widget_components/myGlobalPreviewSearch";
import MyGlobalRecommendationWidget from "./widget_components/myGlobalRecommendationWidget";

import MySDKSearchResultsComponent from './widget_ui_components/mySDKSearchResultsComponent';

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

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">
                <MySDKSearchResultsWidget rfkId = "sdk_search"/>
            </div>

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

          </WidgetsProvider>
)};
```

> [!note]
> Widget components without a `rfkId` value render as a widget component of its widget type.
>
> When a widget component is not declared for a `rfkId` value, the widget component associated for the widget type, if declared, is rendered.