---
title: "usePreviewSearch"
slug: "usepreviewsearch"
abstract: "Details of the usePreviewSearch query hook in Sitecore Discover JS SDK for React."
---
# usePreviewSearch

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

<details>
<summary><h2>Request parameters</h2></summary>

| Name | Type | Description |
| --- | --- | --- |
| `keyphrase` | string | String to search for. |
| `category` | string | Name of category |
| `suggestion` | string | String for suggestion search. |
| `trendingCategory` | string | Name of trending category |

</details>

<details>
<summary><h2>Generic response</h2></summary>

```json
{
    actions: {
        onSuggestionChange: ({ suggestion: string }) => void,
        onTrendingCategoryChange: ({ trendingCategory: string }) => void,
        onKeyphraseChange: ({ keyphrase: string }) => void,
        onCategoryChange: ({ category: string }) => void,
        onProductClick: ({ sku: string }) => void // Track click product event
    },
    // the following are default values
    context: {
        keyphrase: string,
        category: string,
        suggestion: string,
        trendingCategory: string,
    },
    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: {
                trending_category: [
                     {
                        text: string,
                        id: string,
                        in_content: string,
                        url: string
                    }
                ] = [],
                category: [
                    {
                        text: string,
                        id: string,
                        in_content: string,
                        url_path: string
                    }
                ] = [],
                keyphrase: [
                    {
                        text: string,
                        id: string,
                        in_content: string
                    }] = []
            } = {},
            content: { product: { value: products = [] } = {} } = {},
        } = {},
    }
}
```

</details>

<details>
<summary><h2>Import</h2></summary>

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

</details>

<details>
<summary><h2>Example</h2></summary>

```js
import React from 'react';
import { WidgetDataType, WidgetsProvider, usePreviewSearch, widget } from '@sitecore-discover/react';
const MyApp = () => {
    return (
        <WidgetsProvider
                env='<environment>'
                customerKey='<customer key>'
                apiKey='<API key provided in CEC>'
                useToken
            >            <MyPreviewSearchWidget />        </WidgetsProvider>)};
const PreviewSearch = ({
  defaultKeyphrase = '',
  defaultProductsPerPage = 6,
}) => {
    const {
        actions: { onKeyphraseChange, onCategoryChange, onSuggestionChange, onTrendingCategoryChange, onProductClick },
        // the following are default values
        context: {
            productsPerPage = defaultProductsPerPage,
            keyphrase = defaultKeyphrase,
        },
        queryResult: {
            isLoading,
            isFetching,
            data: {
                content: { product: { value: products = [] } = {} } = {},
                suggestion: {
                    trending_category: trendingCategories = [],
                    category: categories = [],
                    keyphrase: suggestions = [],
                }  = {}
            } = {},
        },
    } = usePreviewSearch((query) => {
        // initialization code
        return {
            // initial values
            productsPerPage,
            keyphrase: defaultKeyphrase,
        };
    });
    return (<>     // Logic here. Refer to Search Results Examples
    </>);
}
const MyPreviewSearchWidget = widget(PreviewSearch, WidgetDataType.PREVIEW_SEARCH);
export default MyPreviewSearchWidget;
```

> [!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.

</details>

> [!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/discover-sdk/react/website) built using Discover JS SDK and UI components packages.
>
> -   You can download or fork its [GitHub repository](https://github.com/Sitecore/Discover-JS-SDK-Starter-kit).