useAutosuggest

Overview

The useAutosuggest hook enables the creation of an autosuggest component that provides suggestions based on a given query.

Usage

import { useAutosuggest } from "@unbxd-ui/react-search-hooks";

Code Example

import { useAutosuggest } from "@unbxd-ui/react-search-hooks";
 
const SearchComponent = () => {
	const { query, setQuery } = useAutosuggest({ delay: 300, forceReload: false });
 
	const handleSearch = (event) => {
		setQuery(event.target.value);
	};
 
	return (
		<div>
			<input type="text" value={query} onChange={handleSearch} placeholder="Search for products..." />
		</div>
	);
};

Hook API

Parameters

• The minimum number of characters required in the query before initiating the API call.

• Default value: 3

• It is an object that contains additional configurations for trending searches.
• Further Configs :
  • enabled: A boolean that determines whether the trending search API call should be made.
  • count: The number of trending search suggestions to display.
• Default value :

trendingSearches: {
    enabled: true,
    count: 6
}

• It is an object that contains additional configurations for inFields suggestions.
• Further Configs :
  • count: The number of Infields suggestions to display.
  • prefetch: A boolean that determines whether the search call for inFields suggestions should be made while typing the query itself or no call at all should go.
• Default value :

inFields: {
    count: 2,
    prefetch: false,
    filterField: "category"
}

• It is an object that contains additional configurations for topQueries suggestions.
• Further Configs :
  • count: The number of top queries suggestions to display.
  • prefetch: A boolean that determines whether the search call for top queries suggestions should be made while typing the query itself or no call at all should go.
• Default value :

topQueries: {
        count: 2,
        prefetch: false
}

• It is an object that contains additional configurations for keywordSuggestions suggestions.
• Further Configs :
  • count: The number of keyword suggestions to display.
  • prefetch: A boolean that determines whether the search call for keyword suggestions should be made while typing the query itself or no call at all should go.
• Default value :

keywordSuggestions: {
    count: 2,
    prefetch: false
}

• It is an object that contains additional configurations for keywordSuggestions suggestions.
• Further Configs :
  • count: The number of popularProducts suggestions to display.
  • fields: It is an array that specifies the field names to be fetched for popular products.
• Default value :

popularProducts: {
    count: 3,
    fields: []
}

• It is an object that contains additional configurations for promotedSuggestions suggestions.
• Further Configs :
  • count: The number of promotedSuggestions suggestions to display.
  • prefetch: A boolean that determines whether the search call for keyword suggestions should be made while typing the query itself or no call at all should go.
• Default value :

promotedSuggestions: {
    count: 3,
    prefetch: false
}

Return Values

• This represents the current query in the state that has been entered for autosuggest suggestions.

• This is a function that updates the autosuggest query in the state.

• This is an object that provides responses for keywordSuggestions, popularProducts, inFields, promotedSuggestions, topQueries, and trendingSearches.

• This boolean defines if the component is in loading state or not.

• This is the function that can be used to make a search api call.
• Following parameters can be passed while invoking fetchSearchData in an object:
  • 1.query: Current query for which the call needs to be made.
  • 2.filter: The value of the field name that needs to passed as filter in the api call.
• Usuage :

fetchSearchData({query: "red", filter: "red shirt});

Use Cases

SearchBoxSummary