Skip to content
Home

Infinity Scroller

Info
Demos

Demos

Infinity scroller with load button

A load button is shown at the bottom by having useLoadButton={true} - but here we define our startupPage={5}, so we also get a load button on top.

Code Editor
<HeightLimit>
  <Pagination
    mode="infinity"
    useLoadButton
    startupPage={5}
    minWaitTime={0}
    on_load={({ pageNumber, setContent }) => {
      // simulate server communication delay
      const timeout = setTimeout(() => {
        setContent(pageNumber, <LargePage>{pageNumber}</LargePage>)
      }, Math.ceil(Math.random() * 500))
      return () => clearTimeout(timeout)
    }}
  />
</HeightLimit>

Infinity scroller with custom load indicator

Code Editor
<HeightLimit>
  <Pagination
    mode="infinity"
    indicatorElement={() => (
      <LargePage color="lightgreen">Loading ...</LargePage>
    )}
    startupPage={3}
    pageCount={10}
    minWaitTime={0}
    on_load={({ pageNumber, setContent }) => {
      // simulate server communication delay
      const timeout = setTimeout(() => {
        setContent(pageNumber, <LargePage>{pageNumber}</LargePage>)
      }, Math.ceil(Math.random() * 500))
      return () => clearTimeout(timeout)
    }}
    on_end={({ pageNumber, setContent }) => {
      setContent(pageNumber, <LargePage color="lightgreen">End</LargePage>)
    }}
  />
</HeightLimit>

Infinity scroller with unknown pageCount

Code Editor
<HeightLimit>
  <Pagination
    mode="infinity"
    parallelLoadCount={2}
    minWaitTime={0}
    on_load={({ pageNumber, setContent, endInfinity }) => {
      // simulate server communication delay
      const timeout = setTimeout(() => {
        if (pageNumber > 10) {
          endInfinity()
        } else {
          setContent(pageNumber, <LargePage>{pageNumber}</LargePage>)
        }
      }, Math.ceil(Math.random() * 1e3))
      return () => clearTimeout(timeout)
    }}
    on_end={({ pageNumber, setContent }) => {
      setContent(pageNumber, <LargePage color="lightgreen">End</LargePage>)
    }}
  />
</HeightLimit>

Advanced Table infinity scroller

You can find the code either on GitHub or on CodeSandbox

Infinity Table

This is a semantic correct table using infinity scrolling. It also has a sticky header.

  • The startup page number is set to 3.
  • And per page we show 10 items.
  • A random delay is added to simulate asynchronous interaction.
Code Editor
<HeightLimit height="60rem">
  <PaginationTableExample />
</HeightLimit>