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

RequestResponse
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:

WidgetDataType.RECOMMENDATION, WidgetDataType.PREVIEW_SEARCH , or WidgetDataType.SEARCH_RESULTS

Example

RequestResponse
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>
)};

Do you have some feedback for us?

If you have suggestions for improving this article,