Skip to main content

useSearchTerm

The useSearchTerm hook is a specialized version of useSearch focused on searching by keywords. It automatically handles cache key generation based on the search string and ensures that the search is only executed when a non-empty term is provided. It works on the client as well as on the server.

import { useSearchTerm } from '@archibald/search';

const { data: results, isLoading } = useSearchTerm(searchOptions, fetchOptions);

Parameters

NameTypeRequiredDescription
searchOptionsOmit<SearchRequestOptions, 'categoryId'>Options for the search term request.
fetchOptionsFetchMinOptionsStandard options for the useFetch hook.

searchOptions

  • Type: SearchRequestOptions (without categoryId)
PropertyTypeDescription
searchstringThe search term or keywords.
pageSizenumberNumber of results per page.

fetchOptions

Standard data fetching options. See useFetch for more information.

Return value

  • Type: FetchResult<SearchResponse>
PropertyTypeDescription
dataSearchResponse | nullThe search results.
isLoadingbooleanTrue if the search is in progress.
isDonebooleanTrue if the search has finished.

Example

import { useSearchTerm } from '@archibald/search';

function SearchResults({ query }) {
const { data: results, isLoading } = useSearchTerm({ search: query });

if (isLoading) return <div>Searching for "{query}"...</div>;
if (!results?.products?.length) return <div>No products found for "{query}".</div>;

return <ProductList products={results.products} />;
}