ResultsCount – Yext Help

Check out this Storybook to visualize and test this component.

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:

ResultsCount in Google

Here's what the default component looks like:

Basic Example

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

Check out the component properties in the Search UI React Github repo.