useQuery

Overview

The useQuery hook in the SDK is designed to manage and access the current query state. It allows you to retrieve the current state and update it dynamically whenever necessary, providing an efficient way to handle query-related operations in real-time.

Usage

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

Code Example

import { useQuery } from "@unbxd-ui/react-search-hooks";
 
const SearchComponent = () => {
	const { query, setQuery } = useQuery({ 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 time in milliseconds to wait before updating the search query after the user has stopped typing. This helps to prevent unnecessary searches.

• Turn this boolean to true if you want the api call to trigger even when you hit the same query. If this is turned to false, then for the same query , multiple calls will not happen.
• Default Value: false.

Return Values

• This value represents the current search query being used in the search. Default value of this is set to * if no other query has been provided.

• This value represents the corrected query in case the query entered by the user is not correct.

• This function allows users to set a new search query by passing the desired query as a parameter. It updates the current search state, enabling real-time adjustments based on user input or interactions.

Use Cases

SearchBoxSummary