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

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

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

| Name | Type | Description |
| --- | --- | --- |
| `page` | number | The current page. |
| `keyphrase` | string | String to search for. |
| `selectedFacets` | Record<string,<Array<string>> | The IDs of the facets selected. |
| `productsPerPage` | number | The number of results per page. |
| `sortType` | string | The value for sorting results. |
| `sortDirection` | string | The currently sorting model, ascending or descending.<br><br>*asc* or *desc* |

</details>

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

```json
{
    actions: {
        onKeyphraseChange: ({ keyphrase: string }) => void,
        onResultsPerPageChange: ({ numProducts: number }) => void,
        onPageNumberChange: ({ page: number }) => void,
        onProductClick: ({ sku: string }) => void
        onFilterClick: ({ facetId: string, facetValueId: string, checked: boolean }) => void,
        onSortChange: ({sortType: string, sortDirection: 'asc' | 'desc' }) => void,
        onFacetClick ({facetId: string, facetValueId: string, facetIndex:number, facetValueIndex: number, checked: boolean}) => void,
        onClearFilters: () => void
    },
    // the following are default values
    context: {
        page: number,
        keyphrase: string,
        selectedFacets: Record<string, Array<string>>,
        productsPerPage: number,
        sortType: string,
        sortDirection: 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: {
            total_page, // The total count of results.
            sort: { choices: sortChoices = [] } = {},
            facet: facets = [],
            facet_names: facetNames = [],
            content: { product: { value: products = [] } = {} } = {},
        } = {},
    }
}
```

</details>

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

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

</details>

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

```js
import React from 'react';

import { WidgetDataType, WidgetsProvider, useSearchResults, widget } from '@sitecore-discover/react';

const MyApp = () => {
    return (
        <WidgetsProvider
                env='<environment>'
                customerKey='<customer key>'
                apiKey='<API key provided in CEC>'
                useToken
            >
            <MySearchResultsWidget />
        </WidgetsProvider>
)};

const MySearchResultsComponent = ({
  defaultSortType = 'featured',
  defaultSortDirection = 'desc',
  defaultPage = 1,
  defaultKeyphrase = '',
  defaultProductsPerPage = 24,
}) => {

    const {
        actions: { onResultsPerPageChange, onPageNumberChange, onFilterClick, onSortChange, onFacetClick, onClearFilters },
        // the following are default values
        context: {
            sortType = defaultSortType,
            sortDirection = defaultSortDirection,
            page = defaultPage,
            productsPerPage = defaultProductsPerPage,
        },
        queryResult: {
            isLoading,
            data: {
                total_page: totalPages,
                sort: { choices: sortChoices = [] } = {},
                facet: facets = [],
                facet_names: facetNames = [],
                content: { product: { value: products = [] } = {} } = {},
            } = {},
        },
    } = useSearchResults((query) => {
        // initialization code
        return {
            // initial values
            sortType,
            sortDirection,
            page,
            productsPerPage,
            keyphrase: defaultKeyphrase,
        };
    });

    return (<>
     // Logic here. Refer to Search Results Examples
    </>);
}

const MySearchResultsWidget = widget(MySearchResultsComponent, WidgetDataType.SEARCH_RESULTS);
```

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