Implementing the Stats component

Overview

In the previous lesson, we added the highlight feature to our search functionality to improve the user experience and demonstrate the highlighted attribute based on the search query.

In this lesson, we will learn how to add the stats feature to our search functionality to improve the search experience further

The Stats component

The Stats component displays the total number of matching hits from our results. Also, we get the time it takes to receive the results.

import React from 'react';
import {
	Hits,
  InstantSearch,
  SearchBox,
  Stats
} from "react-instantsearch-dom";

class App extends React.Component {
	render() {
		return (
			<div>
				<InstantSearch>
			      <SearchBox/>
                  <Stats />
				  <Hits hitComponent={Hit} />
				</InstantSearch>
			</div>
		);
	}
}

const Hit = (props) => {
  return (
    <div>
      <img
        alt={props.hit.name}
        src={require(`../${props.hit.image}`).default}
      />
      <div className="title">
        <span>{props.hit.name}</span>
      </div>
      <div className="price">£{props.hit.price}</div>
    </div>
  );
};

Stats props

The translations prop takes a value of type object that is optional. This value is a mapping of keys to translations.

<Stats
       translations={{
          stats(nbHits, timeSpentMS) {
            return nbHits > 0
                      ? `Clothing (${nbHits})`
                      : "no results found";
                  },
          },
        }}
 />