Pagination

Pagination allows you to break large amounts of content to multiple pages.

Basic usage

const total = 1000;
const pageSize = 10;
const page = 5;

<Pagination total={total} pageSize={pageSize} page={page} />

<Pagination total={total} pageSize={pageSize} page={page} />

Other props

Hide arrows

<Pagination
  total={total}
  pageSize={pageSize}
  page={page}
  showArrows={false}
/>

<Pagination
  total={total}
  pageSize={pageSize}
  page={page}
  showArrows={false}
/>

Custom arrows

<Pagination
  total={total}
  pageSize={pageSize}
  page={page}
  left={props => <span {...props}>⬅️</span>}
  right={props => <span {...props}>➡️</span>}
/>

<Pagination
  total={total}
  pageSize={pageSize}
  page={page}
  left={props => <span {...props}>⬅️</span>}
  right={props => <span {...props}>➡️</span>}
/>

Custom pages

<Pagination
  total={total}
  pageSize={pageSize}
  page={page}
  as={props => (
    <a {...props} href={`#`} style={{ color: props.isActive && `red` }} />
  )}
/>

<Pagination
  total={total}
  pageSize={pageSize}
  page={page}
  as={props => (
    <a {...props} href={`#`} style={{ color: props.isActive && `red` }} />
  )}
/>

Custom separators

<Pagination
  total={total}
  pageSize={pageSize}
  page={page}
  separatorLeft={<span>⏪</span>}
  separatorRight={<span>⏩️</span>}
/>

<Pagination
  total={total}
  pageSize={pageSize}
  page={page}
  separatorLeft={<span>⏪</span>}
  separatorRight={<span>⏩️</span>}
/>

Without separators

<Pagination
  total={total}
  pageSize={pageSize}
  page={page}
  separatorLeft={null}
  separatorRight={null}
/>

<Pagination
  total={total}
  pageSize={pageSize}
  page={page}
  separatorLeft={null}
  separatorRight={null}
/>

Pagination

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Basic usage

Other props

Hide arrows

Custom arrows

Custom pages

Custom separators

Without separators

Basic usage