ResultsCount| Hitchhikers Platform

Storybook

When a user makes a search on your website, oftentimes they want to see how many results were found for a given query. Both Google and standard Yext Search experiences show the result count like so:

Here’s what the default component looks like:

Basic Example

The <ResultCount /> component is often used in conjunction with the <SearchBar /> component and <VerticalResults /> component as a visual indicator to show the number of results returned for a given query.

You can use the <ResultsCount /> component like so:

import {
  SearchBar,
  VerticalResults,
  ResultsCount,
  StandardCard,
} from "@yext/search-ui-react";

const App = (): JSX.Element => {
  return (
    <>
      <SearchBar />
      <ResultsCount />
      <VerticalResults CardComponent={StandardCard} />
    </>
  );
};

Customizations

Like the rest of our components, you can customize the elements of the Results Count using the customCssClasses prop.

Component API

Prop Description Default Type
customCssClasses? (Optional) CSS classes for customizing the component styling. ResultsCountCssClasses