API Reference / React InstantSearch / Stats

Stats

Signature 
<Stats
  // Optional parameters
  translations={object}
/>
Import
Copy 
1

import { Stats } from 'react-instantsearch-dom';
See code examples
See live example

About this widget

We released React InstantSearch Hooks, a new InstantSearch library for React. We recommend using React InstantSearch Hooks in new projects or upgrading from React InstantSearch.

The Stats widget displays the total number of matching hits and the time it took to get them (time spent in the Algolia server).

Examples

Copy 
1
2
3

import { Stats } from 'react-instantsearch-dom';

<Stats />

Props

translations
type: object
Optional

A mapping of keys to translation values.
Copy 
1
2
3
4
5
6
7
8
9

<Stats
  translations={{
    stats(nbHits, processingTimeMS, nbSortedHits, areHitsSorted) {
      return areHitsSorted && nbHits !== nbSortedHits
      ? `${nbSortedHits!.toLocaleString()} relevant results sorted out of ${nbHits.toLocaleString()} found in ${processingTimeMS.toLocaleString()}ms`
      : `${nbHits.toLocaleString()} results found in ${processingTimeMS.toLocaleString()}ms`
    },
  }}
/>

HTML output

Copy 
1
2
3
4
5
6
7
8
9
10

<div class="ais-Stats">
  <span class="ais-Stats-text">7,435 relevant results sorted out of 20,337 found in 1ms.</span>
</div>

<!-- or -->

<div class="ais-Stats">
  <span class="ais-Stats-text">20,337 results found in 1ms.</span>
</div>

Customize the UI with connectStats

If you want to create your own UI of the Stats widget or use another UI library, you can use connectors.

Connectors are higher-order components. They encapsulate the logic for a specific kind of widget and they provide a way to interact with the InstantSearch context.

They have an outer component API that we call exposed props, and they provide some other props to the wrapped components which are called the provided props.

It’s a 3-step process:

// 1. Create a React component
const Stats = () => {
  // return the DOM output
};

// 2. Connect the component using the connector
const CustomStats = connectStats(Stats);

// 3. Use your connected widget
<CustomStats />

See code examples

Create a React component

const Stats = ({
  number nbHits,
  number processingTimeMS,
  number nbSortedHits,
  boolean areHitsSorted,
}) => {
  // return the DOM output
};

Provided Props

processingTimeMS
type: number

The time it took on Algolia servers to process this request, in milliseconds.
Copy 
1
2
3
4
5
6

const Stats = ({ processingTimeMS }) => (
  <p>
    Computed in {processingTimeMS}
    ms
  </p>
);
nbHits
type: number

The number of hits that matched the search request.
Copy 
1

const Stats = ({ nbHits }) => <p>There is {nbHits} hits</p>;
nbSortedHits
type: number

The number of sorted hits from Relevant sort that matched the search request.
Copy 
1

const Stats = ({ nbSortedHits }) => <p>There is {nbSortedHits} hits</p>;
areHitsSorted
type: boolean

Indicates whether Relevant sort is applied to the result.
Copy 
1
2
3

const Stats = ({ areHitsSorted }) => (
  <p>You're seeing {areHitsSorted ? 'relevant' : 'all'} results.</p>
);

Create and instantiate your connected widget

const CustomStats = connectStats(Stats);

<CustomStats />

Full example

Copy 
1
2
3
4
5
6
7
8
9
10
11

import { connectStats } from 'react-instantsearch-dom';

const Stats = ({ processingTimeMS, nbHits, nbSortedHits, areHitsSorted }) => (
  <p>
    {areHitsSorted && nbHits !== nbSortedHits
      ? `${nbSortedHits.toLocaleString()} relevant results sorted out of ${nbHits.toLocaleString()} found in ${processingTimeMS.toLocaleString()}ms`
      : `${nbHits.toLocaleString()} results found in ${processingTimeMS.toLocaleString()}ms`}
  </p>
);

const CustomStats = connectStats(Stats);
Did you find this page helpful?
React InstantSearch v6