Skip to content


Default pagination

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

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

Side undefined

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)

Infinity scroller demos

Check out demos for the Infinity Scroller.