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