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

RequestResponse
import ( widget ) from '@sitecore-search/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

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

            <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.

Do you have some feedback for us?

If you have suggestions for improving this article,