API Reference / React InstantSearch Widgets / Stats
Aug. 23, 2019
Widget signature
<Stats
  // Optional parameters
  translations={object}
/>

About this widget

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

1
2
3
import { Stats } from 'react-instantsearch-dom';

<Stats />

Props

translations
type: object
Optional

A mapping of keys to translation values.

1
2
3
4
5
6
7
<Stats
  translations={{
    stats(nbHits, timeSpentMS) {
      return `${nbHits} results found in ${timeSpentMS}ms`;
    },
  }}
/>

HTML output

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

Customize the UI - 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 />

Create a React component

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

Provided Props

processingTimeMS
type: number

The time it took on Algolia servers to process this request, in milliseconds.

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.

1
const Stats = ({ nbHits }) => <p>There is {nbHits} hits</p>;

Create and instantiate your connected widget

const CustomStats = connectStats(Stats);

<CustomStats />

Full example

1
2
3
4
5
6
7
8
9
10
import { connectStats } from 'react-instantsearch-dom';

const Stats = ({ processingTimeMS, nbHits }) => (
  <p>
    Found {nbHits} results in {processingTimeMS}
    ms
  </p>
);

const CustomStats = connectStats(Stats);

Did you find this page helpful?