---
title: "setWidget function"
slug: "setwidget-function"
abstract: "Details of the setWidget high order function in Sitecore Search 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-search/react';
```

## Arguments

You can use this function with or without specifying the entity. When you specify the entity, only the search results using that entity are returned.

| Name | Description |
| --- | --- |
| `rfkId` | String. ID of widget as configured in Sitecore Search. |
| `config` | See following config object schema. |

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

### Using the function with a specific entity.

| Name | Description |
| --- | --- |
| `rfkId` | String. ID of widget as configured in Sitecore Search. |
| `entity_type` | String. Used to filter search results for a specific entity type. |
| `config` | See following config object schema. |

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

### Config 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-search/react";
import ( MySDKSearchResultsComponent ) from "./widgetvics/mySDKSearchResultsComponent";

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

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

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

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

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

          </WidgetsProvider>
)};
```