Stats

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 />

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

1
2
3
4
5
6
const Stats = ({ processingTimeMS }) => (
  <p>
    Computed in {processingTimeMS}
    ms
  </p>
);

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);

1
<CustomStats />

HTML output

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