Skip to main content
The <Stats> component displays statistics about the current search results, such as the number of hits and processing time.

​
Import

import { Stats } from 'react-instantsearch';

​
Props

​
translations
object
Customize the text to display.
<Stats
  translations={{
    rootElementText({ nbHits, processingTimeMS, nbSortedHits, areHitsSorted }) {
      return areHitsSorted && nbHits !== nbSortedHits
        ? `${nbSortedHits.toLocaleString()} relevant results sorted out of ${nbHits.toLocaleString()} in ${processingTimeMS.toLocaleString()}ms`
        : `${nbHits.toLocaleString()} results found in ${processingTimeMS.toLocaleString()}ms`;
    },
  }}
/>
​
classNames
object
CSS classes to customize the component styling.

​
Example

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

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

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

​
Custom Format

function App() {
  return (
    <InstantSearch searchClient={searchClient} indexName="products">
      <Stats
        translations={{
          rootElementText({ nbHits, processingTimeMS }) {
            return `${nbHits} product${nbHits !== 1 ? 's' : ''} found (${processingTimeMS}ms)`;
          },
        }}
      />
      <Hits />
    </InstantSearch>
  );
}

​
With Sorted Results

When using AI Re-Ranking or similar features that sort results, the Stats component will display both the number of sorted hits and total hits: 
// Example output with sorted results:
// "42 relevant results sorted out of 1,234 found in 23ms"

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

Build docs developers (and LLMs) love

Get started for freeTalk to us