useSearchResults

{
    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 = [] } = {} } = {},
        } = {},
    }
}

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

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);