Docs
Components
Results
Infinite Hits

Infinite Hits

The Hits component displays a list of results from the current search.

Searchkit Setup

Within result_attributes in search_settings:

{
  search_settings: {
    result_attributes: ['title', 'description', 'image', 'price', 'url']
  }
}

Usage

Below is an example of a hitView that displays the product attribute with the search query highlighted.

 
const hitView = ({ hit }) => {
  return (
    <div>
      <img src={hit.image} />
      <h2>{hit.title}</h2>
      <p>{hit.description}</p>
      <p>{hit.price}</p>
      <p>{hit.url}</p>
    </div>
  )
}
 
const App = () => {
  return (
    <InstantSearch
      searchClient={searchClient}
      indexName="products"
    >
      <InfiniteHits hitComponent={hitView} />
    </InstantSearch>
  )
}

Documentation


Apache 2.0 2024 © Joseph McElroy.
Need help? Join discord