Skip to content
EvolveEvolveEvolve

Pagination

Prop-driven pager: previous/next plus a page / pageCount readout, no data fetching. Renders nothing when there is nowhere to go.

import { Pagination } from "@evolve-storefront/ui/pagination";
Design notes

renderLink is for server-side paging, which is navigation and therefore an anchor, and it keeps this free of a client directive; onPageChange is for paging that must not touch the URL. pageCount is optional: an uncountable source pages on hasNextPage.

Preview

DefaultOpen in Storybook ↗

Usage

<Pagination
  page={page}
  pageCount={pageCount}
  onPageChange={setPage}
  previousLabel={t("previous")}
  nextLabel={t("next")}
  label={t("pagination")}
/>;

Props

No props of its own.

Examples

Middle Page
// Away from both ends, previous and next are both enabled.
<Pagination page={3} pageCount={5} onPageChange={setPage} />;
Open in Storybook ↗
Custom LabelsCustom (e.g.
// The defaults are English; an app passes its own translations.
<Pagination
  page={page}
  pageCount={pageCount}
  onPageChange={setPage}
  previousLabel={t("previous")}
  nextLabel={t("next")}
/>;
Open in Storybook ↗
Single PageA single page renders nothing — the pager hides itself.
// Nowhere to go: this renders nothing, so the caller needs no guard.
<Pagination page={1} pageCount={1} onPageChange={setPage} />;
Open in Storybook ↗
Link ModeLink mode, for paging the server.
// Server-side paging: the URL is the state, so there is no onPageChange.
<Pagination
  page={page}
  pageCount={pageCount}
  renderLink={({ page, children }) => <Link href={pageHref(page)}>{children}</Link>}
/>;
Open in Storybook ↗