Pagination

Demos

Default pagination

Side 4
Code Editor<Pagination
  page_count={888}
  current_page={4}
  on_change={({ pageNumber }) => {
    console.log('on_change:', pageNumber)
  }}
>
  <P>Current Page Content</P>
</Pagination>

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

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
Code Editor<Pagination align="center" page_count={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.