The useSearch function is a React hook used to show search result, perform search and filter the results.


The useSearch hook can only be used in search page types.

import { useSearch } from "builderoo";
const { results, filters, query, setQuery, toggleFilter, searchAgain, loading } = useSearch()

Return Values

resultsSearchResultThe search results.
filtersSearchFilter[]Filters to drill down the results.
querystringCurrent search query. Used to show query in the search box or elsewhere.
setQueryfunctionUsed to set the search query as the user types.
toggleFilterfunctionA function toggle a search filter selection.
searchAgainfunctionPerform the search again with new query and selected filters.
loadingbooleanIf the search is currently loading


  1. Here’s the signature of the function toggleFilter
function toggleFilter(name: string, type: string | undefined, choice: string, apply: boolean = true)

Calling toggleFilter automatically performs the search again. To apply multiple filters, then apply once, call toggleFilter with apply = false value.

  1. Instead of using another state variable, query and setQuery can be used in the search input value and to set value. setQuery does not automatically perform the search again. Call searchAgain to perform the search again with updated query and selected filters.