No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

usePreviewSearch

The usePreviewSearch hook returns the data and functionality to provides a way to perform preview search.

Return Value

{ actions: { onSuggestionAdded: ({ suggestion: string, max?: number }) => void, onSuggestionRemoved: ({ suggestion: string, max?: number }) => void, onKeyphraseChange: ({ keyphrase: string }) => void, onItemClick: ({ id: string, index: number }) => void // Track item click event }, // the following are default values context: { keyphrase: string, suggestionsList: [{ suggestion: string; // suggestion name configured in CEC max?: number; // max count of suggestion to return }]; itemsPerPage: number; }, queryResult: { isLoading, // The query has no data and is currently fetching isError,// The query encountered an error isSuccess, // The query was successful and data is available isFetching, // In any state, if the query is fetching at any time (including background refetching) isFetching will be true. data: { suggestion: { [key: string]: [{ freq: number, text: string }] } = {}, content: items = [] , } = {}, } }

Importing

import { usePreviewSearch } from '@sitecore-search/react';

Usage: Example for content entity

import React from 'react'; import { WidgetDataType, WidgetsProvider, usePreviewSearch, widget } from '@sitecore-search/react'; const MyApp = () => { return ( <WidgetsProvider env='<environment>' customerKey='<customer key>' apiKey='<API key provided in CEC>' > <MyPreviewSearchWidget /> </WidgetsProvider> )}; type ArticleModel = { id: string; name: string; image_url: string; url: string; }; const PreviewSearchWidget = ({ defaultItemsPerPage = 6 }) => { const { context: { itemsPerPage = defaultItemsPerPage, keyphrase = '' }, actions: { onItemClick, onKeyphraseChange }, queryResult: { isFetching, isLoading, data: { content: items = [], suggestion: { content_name_context_aware: articleSuggestions = [], content_trending_category: trendingCategorySuggestions = [], } = {}, } = {}, }, } = usePreviewSearch<ArticleModel>(() => { return { suggestionsList: [ { suggestion: 'content_name_context_aware', max: 10 }, { suggestion: 'content_trending_category', max: 10 }, ], itemsPerPage, }; }); return (<> // Logic here. Refer to Widget templates to see a complete example </>); } const MyPreviewSearchWidget = widget(PreviewSearchWidget, WidgetDataType.PREVIEW_SEARCH, 'content');

Note: To make the hook available, the SDK needs the component to be registered. This can be made using the widget function. Where the first parameter for widget is the component itself, the second one a constant that indicates the widget type and the last one is the entity type. In this case the widget type constant is getting from WidgetDataType.PREVIEW_SEARCH.