---
title: "usePreviewSearch"
slug: "usepreviewsearch"
abstract: "Details of the usePreviewSearch query hook in Sitecore Search JS SDK for React."
---
# 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

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

## Import

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

## Example

```js
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:
>
> ```csharp
> ...
> 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.

> [!note]
> **Notice**
> These React resources can help you with your implementation:
>
> -   To view working examples of widgets, visit the [starter kit website](https://developers.sitecorecloud.io/search-sdk/react/website) built using Search JS SDK and UI components packages.
>
> -   You can download or fork its [GitHub repository](https://github.com/Sitecore/Sitecore-Search-JS-SDK-Starter-Kit/blob/main/README.md).