Pagination| Hitchhikers Platform

Storybook

The <Pagination /> component is used to toggle between pages of vertical search results. This is a common UX feature of most search experiences on the web.

Here’s what it looks like positioned below some vertical results:

Keep in mind that universal search does not support pagination.

Basic Example

Usually, the <Pagination /> component is added below the <VerticalResults /> component:

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

function App() {
  const searchActions = useSearchActions();

  useEffect(() => {
    searchActions.setVertical("products");
  }, []);

  return (
    <div className="flex justify-center px-4 py-6">
      <div className="w-full max-w-5xl">
        <SearchBar />
        <VerticalResults CardComponent={StandardCard} />
        <Pagination />
      </div>
    </div>
  );
}

export default App;

Results Per Page

By default, there are 20 results per page. You can change this to be any number between 1 and 50 results per page with the setVerticalLimit method from useSearchActions:

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

function App() {
  const searchActions = useSearchActions();

  useEffect(() => {
    searchActions.setVertical("products");
    searchActions.setVerticalLimit(10);
  }, []);

  return (
    <div className="flex justify-center px-4 py-6">
      <div className="w-full max-w-5xl">
        <SearchBar />
        <VerticalResults CardComponent={StandardCard} />
        <Pagination />
      </div>
    </div>
  );
}

export default App;

Pagination on No Results

By default, the <VerticalResults /> component will still display result cards when there are no results for a query. You can read more about this here.

Normally the <Pagination /> component will not display when no results are returned for a query, but you can change this with the paginateAllOnNoResults prop:

<Pagination paginateAllOnNoResults />

Customizations

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

Component API

Prop Description Default Type
customCssClasses? (Optional) CSS classes for customizing the component styling. PaginationCssClasses
paginateAllOnNoResults? (Optional) Whether or not to paginate based on the total results count of the vertical when there are none returned from the search. false CardComponent
Feedback