1. High order functions

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

import setWidget from '@sitecore-discover/react';

Arguments

NameDescription
rfkIdString ID configured in the CEC.
widgetSee following widget object schema.

Widget object

NameDescription
componentUI component to be configured into widget component
typeEnumerator for widget type with following values:

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

Example

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>
)};
If you have suggestions for improving this article, let us know!