---
title: "Render widgets using the generic widget component"
slug: "render-widgets-using-the-generic-widget-component"
abstract: "How to use the Widget component from Sitecore Discover JS SDK to render widgets in your React application."
---
# Render widgets using the generic widget component

`WidgetsProvider` and `PageWidgetsProvider` and root components for an application built using the JS SDK. Both providers can authenticate and set cookies.

Use `WidgetsProvider` and `PageWidgetsProvider`

You can use either of them because they both orchestrate the rendering based on the page or URL and its list of widgets. You can use the generic widget to render all widgets.

<details>
<summary><h2>Render merchandising widget components with the Widget component</h2></summary>

`WidgetsProvider` renders only widget components. You have to pass the UI component of a merchandising widget to the `widget` or `setWidget` function to create its widget component. During this process, you assign it a `rfkId` and widget type.

When you add a `Widget` component within `WidgetProvider` and assign it an `rfkId`, you can ensure that:

- The widget with that `rfkId` renders.
- That all widgets of the same widget type renders. as long as their widget components are instantiated.

To render all search results widgets with the `Widget` component, provided the `rfkId` of one of them is `sdk_search`:

1. In your `application` component, copy and paste the following code block.

    ```js
    import { WidgetsProvider, Widget  } from "@sitecore-discover/react";
    const MyApp = () => {
        return (
            <WidgetsProvider
                    env='<environment>'
                    customerKey='<customer key>'
                    apiKey='<api key>'
                    useToken
                >
                <Widget rfkId="sdk_search" />
            </WidgetsProvider>
        )
    };
    ```

2. In your `application` component, to create a generic search results widget, import and instantiate your component as shown in the following code block:

    ```js
    import { WidgetsProvider, Widget, WidgetDataType } from "@sitecore-discover/react";
    import MySDKSearchResultsComponent from "./widgets_components/MySDKSearchResultsComponent";

    setWidgetType( WidgetDataType.SEARCH_RESULTS, {  component: MySDKSearchResultsComponent } );
    ```

3. In your `application` component, to create a search results widget for a specific `rfkId`, import and instantiate your component as shown in the following code block:

    ```js
    import { WidgetsProvider, Widget, WidgetDataType } from "@sitecore-discover/react";
    import MySDKSearchResultsComponent from "./widgets_components/MySDKSearchResultsComponent";

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

> [!note]
> A page can contain only one search results widget.

</details>

<details>
<summary><h2>Render content personalization widgets</h2></summary>

To render content personalization widgets based on `rfkId`:

- Import and add them to `WidgetProvider` as shown in the following code block:

    ```js
    import { SEOWidget, BannerWidget, HTMLBlockWidget } from "@sitecore-discover/react";
    const MyApp = () => {
        return (
            <WidgetsProvider
                    env='<environment>'
                    customerKey='<customer key>'
                    apiKey='<api key>'
                    useToken
                >
                <Widget rfkId="sdk_banner" />
                <Widget rfkId="sdk_seo" />
                <Widget rfkId="sdk_html_block" />
            </WidgetsProvider>
        )
    };
    ```

</details>