usePreviewSearch

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

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

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;