Skip to main content
The <Hits> component displays the search results returned by Algolia.

​
Import

import { Hits } from 'react-instantsearch';

​
Props

​
hitComponent
React.Component
Custom component to render each search result.
<Hits
  hitComponent={({ hit, sendEvent }) => (
    <div>
      <h2>{hit.name}</h2>
      <p>{hit.description}</p>
    </div>
  )}
/>
​
escapeHTML
boolean
default:"true"
Whether to escape HTML in the results.
<Hits escapeHTML={false} />
​
transformItems
function
Transform the hits before displaying them.
<Hits
  transformItems={(items) =>
    items.map((item) => ({
      ...item,
      name: item.name.toUpperCase(),
    }))
  }
/>
​
bannerComponent
React.Component | false
Component to render a banner above the results. Set to false to disable.
<Hits
  bannerComponent={({ banner, className }) => (
    <div className={className}>
      <img src={banner.image.url} alt={banner.image.title} />
    </div>
  )}
/>
​
classNames
object
CSS classes to customize the component styling.

​
Example

import { InstantSearch, SearchBox, Hits, Highlight } from 'react-instantsearch';
import { liteClient as algoliasearch } from 'algoliasearch/lite';

const searchClient = algoliasearch(
  'YourApplicationID',
  'YourSearchOnlyAPIKey'
);

function Hit({ hit }) {
  return (
    <article>
      <img src={hit.image} alt={hit.name} />
      <h1>
        <Highlight hit={hit} attribute="name" />
      </h1>
      <p>{hit.price}</p>
    </article>
  );
}

function App() {
  return (
    <InstantSearch searchClient={searchClient} indexName="products">
      <SearchBox />
      <Hits hitComponent={Hit} />
    </InstantSearch>
  );
}

​
With TypeScript

import { Hit } from 'instantsearch.js';

type ProductHit = {
  name: string;
  description: string;
  price: number;
  image: string;
};

function ProductHitComponent({ hit }: { hit: Hit<ProductHit> }) {
  return (
    <article>
      <img src={hit.image} alt={hit.name} />
      <h1>{hit.name}</h1>
      <p>${hit.price}</p>
    </article>
  );
}

function App() {
  return (
    <InstantSearch searchClient={searchClient} indexName="products">
      <Hits<ProductHit> hitComponent={ProductHitComponent} />
    </InstantSearch>
  );
}