1. Search JS SDK for React

widget function

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

Import path

import ( widget ) from '@sitecore-search/react';

Arguments

Name

Description

ui_component

UI component to be configured into widget component.

type

Enumerator constants for widget type with the following values:

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

entity

Name of entity represented in the data source or results displayed in the widget.

Example

import { WidgetsProvider, WidgetDataType, widget } from '@sitecore-search/react';
import ( MyGlobalPreviewSearch ) from "./widgets/myGlobalPreviewSearch";
import ( MyGlobalRecommendationWidget ) from "./widgets/myGlobalRecommendationWidget";  
import ( MySDKSearchResultsComponent ) from './widgets/mySDKSearchResultsComponent';

const MySDKSearchResultsWidget = widget(MySDKSearchResultsComponent, WidgetDataType.SEARCH_RESULTS, "content");

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.

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