Skip to main content

useSearch

The useSearch hook consumes the search context provided by the SearchProvider component. You can use this context to change the search state and consume its values.

Import​

import { useSearch } from '@faststore/sdk'

Usage​

// Create a selection sort button

const keyMap = {
  price_desc: 'Price, descending',
  price_asc: 'Price, ascending',
  orders_desc: 'Top sales',
  name_asc: 'Name, A-Z',
  name_desc: 'Name, Z-A',
  release_desc: 'Release date',
  discount_desc: 'Discount',
  score_desc: 'Relevance',
}

const keys = Object.keys(keyMap)

function Component () {
  const {
    setSort,
    state: { sort },
  } = useSearch()

  return (
    <select
      onChange={(e) => setSort(keys[e.target.selectedIndex])}
      value={sort}
    >
      {keys.map((key) => (
        <option key={key} value={key}>
          {keyMap[key]}
        </option>
      ))}
    </select>
  )
}

Return​

itemsPerPagenumber
Description

Number of items per page.

stateSearchState
Description

Current state of the search represented by the selected facets, sort option, and URL path.

setSort(sort: SearchSort) => void
Description

Sets the sorting criteria of the search results.

setTerm(term: string | null) => void
Description

Sets the full-text term.

setPage(page: number) => void
Description

Sets the current page on search pagination.

setFacet(facet: Facet, unique?: boolean) => void
Description

Selects a specific facet.

removeFacet(facet: Facet) => void
Description

Removes a specific facet.

toggleFacet(facet: Facet) => void
Description

Replaces a specific facet.

toggleFacets(facets: Facet[]) => void
Description

Toggles a specific facet.

addPrevPage() => void
Description

Prepends a page to the infinite scroll pagination.

addNextPage() => void
Description

Appends a page to the infinite scroll pagination.

ON THIS PAGE