ResultsCount| Hitchhikers Platform

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`

On this page

<% elem.innerText %>