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.

useSearchResults

The useSearchResults hook returns the data and functionality to provides a way to perform a search results widget.

Return Value

{ actions: { onKeyphraseChange: ({ keyphrase: string }) => void, onClearFilters: () => void, onResultsPerPageChange: ({ numItems: number }) => void, onPageNumberChange: ({ page: number }) => void, onItemClick: ({ id: string, index: number }) => void // Track click product event onFilterClick: ({ facetId: string, facetValueId: string, checked: boolean }) => void, onSortChange: ({ name: string }) => void, onFacetClick ({facetId: string, facetValueId: string, facetIndex: number, facetValueIndex: number, checked: boolean}) => void, }, // the following are default values context: { page: number, // The current page. keyphrase: string, selectedFacets: Record<string, Array<string>>, // The ids of the facets selected. In case more info is required use the hook useSearchResultsSelectedFacets itemsPerPage: number, // The number of results per page. sortType: string, // The value for sorting results. }, 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: { total_item: number, // The total count of results. limit: number, offset: number, related_questions: [{ answer: string, context: string, document_id: string, extra_fields: Record<string, any>, highlight: string, question: string, }] = [], sort: { choices: [ { label: string, name: string }] = [] } = {}, facet: [ { name: string; label: string; value: [ count: number; id: string; max: number; min: number; text: string; ]; }] = [], content: items = [], } = {}, } }

Importing

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

Usage

import React from 'react'; import { WidgetDataType, WidgetsProvider, useSearchResults, widget } from '@sitecore-search/react'; const MyApp = () => { return ( <WidgetsProvider env='<environment>' customerKey='<customer key>' apiKey='<API key provided in CEC>' > <MySearchResultsWidget /> </WidgetsProvider> )}; const MySearchResultsComponent = ({ defaultSortType = 'featured_desc', defaultPage = 1, defaultKeyphrase = '', defaultItemsPerPage = 24, }) => { const { actions: { onResultsPerPageChange, onPageNumberChange, onItemClick, onFilterClick, onSortChange, onFacetClick, onClearFilters, }, context: { sortType = defaultSortType, page = defaultPage, itemsPerPage = defaultItemsPerPage }, queryResult: { isLoading, isFetching, data: { limit = 1, total_item: totalItems = 0, sort: { choices: sortChoices = [] } = {}, facet: facets = [], content: articles = [], } = {}, }, } = useSearchResults<ArticleModel>(() => { return { sortType, page, itemsPerPage, keyphrase: defaultKeyphrase, }; }); return (<> // Logic here. Refer to Widget templates to see a complete example </>); } const MySearchResultsWidget = widget(MySearchResultsComponent, WidgetDataType.SEARCH_RESULTS, '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.SEARCH_RESULTS.