Skip to content
Home

Pagination

Info
Demos
Properties
Events

Demos

Default pagination

Side 4
<Pagination
  pageCount={888}
  currentPage={4}
  onChange={({ pageNumber }) => {
    console.log('onChange:', pageNumber)
  }}
>
  <P>Current Page Content</P>
</Pagination>

If you need to access methods provided by the render property arguments.

Side undefined

Pagination with custom navigation element

Use transformNavigationItem to replace the default navigation buttons with custom elements.

12345678910
Side 3
<Pagination
  pageCount={10}
  currentPage={3}
  transformNavigationItem={(pageNumber, navigationItemProps) => (
    <Anchor href={`/page/${pageNumber}`} {...navigationItemProps} />
  )}
  onChange={({ pageNumber }) => {
    console.log('onChange:', pageNumber)
  }}
>
  <P>Current Page Content</P>
</Pagination>

Horizontal pagination

Side 4
<Pagination
  pageCount={888}
  currentPage={4}
  onChange={({ pageNumber }) => {
    console.log('onChange:', pageNumber)
  }}
  paginationBarLayout="horizontal"
>
  <P>Current Page Content</P>
</Pagination>

Centered Pagination with random delay

Note that we keep the height of the previous page. All pages can for sure have their own height.

Side undefined
<Pagination align="center" pageCount={30}>
  {({ pageNumber, setContent }) => {
    // simulate server communication delay
    const timeout = setTimeout(() => {
      setContent(pageNumber, <LargePage>{pageNumber}</LargePage>)
    }, Math.ceil(Math.random() * 500))
    return () => clearTimeout(timeout)
  }}
</Pagination>

Infinity scroller demos

Check out demos for the Infinity Scroller.