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

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

## Import path

```js
import setWidget 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 { WidgetsProvider, WidgetDataType, setWidget } from "@sitecore-discover/react";
import ( MySDKSearchResultsComponent ) from "./widgets_ui_components/mySDKSearchResultsComponent";

const MySDKSearchResultsWidget = setWidget('sdk_search', {  type: WidgetDataType.SEARCH_RESULTS,  component: MySDKSearchResultsComponent } );

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 />
            </div>

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

          </WidgetsProvider>
)};
```