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";⚠️
Note:
The useQuery hook must be used within the wrapper (in CSR, SSR and Custom Hooks approaches) to ensure that the respective component(s) and the search functionality work properly.
Code Example
// This is a sample example.
// Please go through the entire documentation for understanding different usecases and update as per your needs.
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
trueif you want the api call to trigger even when you hit the same query. If this is turned tofalse, 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.
Return value format:
// User searches for "red shoes"
query: "red shoes"
// User searches for "laptop"
query: "laptop"- This value represents the corrected query in case the query entered by the user is not correct.
Return value format:
// User types "ipohne" (misspelled)
query: "ipohne"
suggestedQuery: "iphone"
// User types "labtop" (misspelled)
query: "labtop"
suggestedQuery: "laptop"
- 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.
Example Usage:
// This is a sample example.
// Please go through the entire documentation for understanding different usecases and update as per your needs.
import { useQuery } from "@unbxd-ui/react-search-hooks";
const SearchExamples = () => {
const { query, setQuery } = useQuery();
const handleInputChange = (event) => {
setQuery(event.target.value);
};
const searchForShoes = () => {
setQuery("shoes");
};
const clearSearch = () => {
setQuery("");
};
const acceptSuggestion = (suggestedQuery) => {
setQuery(suggestedQuery);
};
return (
<div>
{/* Text input */}
<input
type="text"
value={query === '*' ? '' : query}
onChange={handleInputChange}
placeholder="Search..."
/>
{/* Quick search buttons */}
<button onClick={searchForShoes}>Search for Shoes</button>
<button onClick={clearSearch}>Clear Search</button>
{/* Accept suggestion */}
<button onClick={() => acceptSuggestion("laptop")}>
Search for "laptop"
</button>
</div>
);
};
SearchBox
Summary