usePreviewSearch

Use the preview search query hook to request and retrieve data for preview search widgets.

Request parameters

Name	Type	Description
`keyphrase`	string	String to search for
`suggestionsList`	array of strings	List of suggestions
`itemsPerPage`	integer	Number of items on page.

Generic response

{
    widgetRef,
    actions: { onItemClick, onKeyphraseChange },
    queryResult: {
      isFetching,
      isLoading,
      data: {
        content: articles = [],
        suggestion: {
          content_name_context_aware: articleSuggestions = [],
          content_trending_category: trendingCategorySuggestions = [],
        } = {},
      } = {},
    },
}

Import

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

Example

import type {
  PreviewSearchInitialState,
  PreviewSearchWidgetQuery,
  SearchResponseSuggestion,
} from '@sitecore-search/react';

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

type ArticleModel = {
  id: string;
  name: string;
  image_url: string;
  url: string;
  source_id?: string;
};

articles: Array<ArticleModel>;

type InitialState = PreviewSearchInitialState<'itemsPerPage' | 'suggestionsList'>;

export const PreviewSearchComponent = ({ defaultItemsPerPage = 6 }) => {
  const {
    widgetRef,
    actions: { onItemClick, onKeyphraseChange },
    queryResult: {
      isFetching,
      isLoading,
      data: {
        content: articles = [],
        suggestion: {
          content_name_context_aware: articleSuggestions = [],
          content_trending_category: trendingCategorySuggestions = [],
        } = {},
      } = {},
    },
  } = usePreviewSearch<ArticleModel, InitialState>({
    query: (query:PreviewSearchWidgetQuery) => query,
    state: {
      suggestionsList: [
        { suggestion: 'content_name_context_aware', max: 10 },
        { suggestion: 'content_trending_category', max: 10 },
      ],
      itemsPerPage: defaultItemsPerPage,
    },
  });

  const loading = isLoading || isFetching;

  return ( <div ref={widgetRef}> ... </div> );
};
const PreviewSearchLeftStyledWidget = widget(PreviewSearchComponent, WidgetDataType.PREVIEW_SEARCH, 'content');
export default PreviewSearchLeftStyledWidget;

Important

Each suggestion in the suggestionsList parameter supports the keyphrase_fallback boolean parameter. When set to true, Search uses the first suggestion from the first suggestion block as an alternate keyword when there are no results for a search. See the sample code snippet:

...
state: {
suggestionsList: [{ suggestion: 'title_context_aware', max: 10, keyphrase_fallback: true}],
itemsPerPage: defaultItemsPerPage,
},
...

Note

Convert a UI component into a widget component before adding it to pages.

To convert a component into a widget component, pass the UI component to the widget or setWidget function.

Notice

These React resources can help you with your implementation:

To view working examples of widgets, visit the starter kit website built using Search JS SDK and UI components packages.
You can download or fork its GitHub repository.

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