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
RequestResponse
import ( widget ) from '@sitecore-search/react';Arguments
|
Name |
Description |
|---|---|
|
|
UI component to be configured into widget component |
|
|
Enumerator constants for widget type with the following values:
|
|
|
Name of entity represented in the data source or results displayed in the widget. This can be found in the CEC. |
Example
RequestResponse
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.