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

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

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!