stats

Displays useful insights about the current search results, including the number of hits and processing time.

Usage

import instantsearch from 'instantsearch.js';
import { stats } from 'instantsearch.js/es/widgets';

const search = instantsearch({
  indexName: 'instant_search',
  searchClient
});

search.addWidgets([
  stats({
    container: '#stats'
  })
]);

search.start();

Parameters

container · string | HTMLElement · required

CSS selector or HTMLElement to insert the widget.

templates · object

Templates to use for the widget.

Show properties

text · string | function

Template for the stats text. Receives nbHits, nbSortedHits, areHitsSorted, nbPages, page, processingTimeMS, query, hitsPerPage, and boolean helpers: hasManyResults, hasNoResults, hasOneResult, hasNoSortedResults, hasOneSortedResults, hasManySortedResults.

Default: Displays results count and processing time.

cssClasses · object

CSS classes to add to the widget elements.

Show properties

root · string | string[]

CSS class to add to the root element.

text · string | string[]

CSS class to add to the text span element.

Examples

Custom template

stats({
  container: '#stats',
  templates: {
    text({ nbHits, processingTimeMS, nbSortedHits, areHitsSorted }) {
      return `Found ${nbHits.toLocaleString()} results in ${processingTimeMS}ms`;
    }
  }
});

With sorted results

stats({
  container: '#stats',
  templates: {
    text(props) {
      if (props.areHitsSorted) {
        return `${props.nbSortedHits} relevant results (out of ${props.nbHits})`;
      }
      return `${props.nbHits} results`;
    }
  }
});

HTML output

<div class="ais-Stats">
  <span class="ais-Stats-text">1,000 results found in 2ms</span>
</div>