Pagination

Usage #

onChange return page selected.

function() {
  const [page, setPage] = React.useState(8)

  return (
    <Pagination
      aria-label="Pagination"
      getHref={page => `?page=${page}`}
      page={page}
      onChange={setPage}
      pageCount={10}
    />
  )
}
Copy

Range display #

When your range display is above your pageCount, all the pages are shown.
Change range with rangeDisplay, by default it is 5.

function() {
  const [page, setPage] = React.useState(1)

  return (
    <Pagination
      aria-label="Pagination"
      getHref={page => `?page=${page}`}
      page={page}
      onChange={setPage}
      pageCount={5}
      rangeDisplay={10}
    />
  )
}
Copy

Custom previous & next #

Set custom previous and next buttons using leftArrow and rightArrow.

function() {
  const [page, setPage] = React.useState(5)

  return (
    <Pagination
      aria-label="Pagination"
      getHref={page => `?page=${page}`}
      page={page}
      onChange={setPage}
      pageCount={10}
      leftArrow={<CrownIcon size="xs" />}
      rightArrow={<CrownIcon size="xs" />}
    />
  )
}
Copy

Properties #

Packages #

Dependencies #

Peer dependencies #