1. High order functions

setWidgetType function

Use the setWidgetType high order function to configure UI components into widget components that can be added to the WidgetsProvider component.

Import path

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

Arguments

Name

Description

ui_component

UI component to be converted into widget component

type

Enumerator for widget type with the following values:

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

Example

import { WidgetsProvider, WidgetDataType, setWidgetType } from '@sitecore-discover/react';
import MyGlobalPreviewSearch from "./widget_components/myGlobalPreviewSearch";
import MyGlobalRecommendationWidget from "./widget_components/myGlobalRecommendationWidget";  

import MySDKSearchResultsComponent from './widget_ui_components/mySDKSearchResultsComponent';

const MySDKSearchResultsWidget = setWidgetType(MySDKSearchResultsComponent, WidgetDataType.SEARCH_RESULTS);

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 rfkId = "sdk_search"/>
            </div>
          
            <footer>
                <MyGlobalRecommendationWidget rfkId="footer_rec" />
            </footer>

          </WidgetsProvider>
)};
Note

Widget components without a rfkId value render as a widget component of its widget type.

When a widget component is not declared for a rfkId value, the widget component associated for the widget type, if declared, is rendered.

If you have suggestions for improving this article, let us know!