InfinityScroller

Infinity scroller with load button

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

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

Infinity scroller with custom load indicator

Code Editor<HeightLimit>
  <Pagination
    mode="infinity"
    indicator_element={() => (
      <LargePage color="lightgreen">Loading ...</LargePage>
    )}
    startup_page={3}
    page_count={10}
    min_wait_time={0}
    on_load={({ page, setContent }) => {
      // simulate server communication delay
      const timeout = setTimeout(() => {
        setContent(page, (
          <LargePage>
            {page}
          </LargePage>)
        )
      }, Math.ceil(Math.random() * 500))

      return () => clearTimeout(timeout)
    }}
    on_end={({ page, setContent }) => {
      setContent(page, <LargePage color="lightgreen">End</LargePage>)
    }}
  />
</HeightLimit>

Infinity scroller with unknown `page_count`

Code Editor<HeightLimit>
  <Pagination
    mode="infinity"
    parallel_load_count={2}
    min_wait_time={0}
    on_load={({ page, setContent, endInfinity }) => {
      // simulate server communication delay
      const timeout = setTimeout(() => {
        if(page > 10){
          endInfinity()
        }
        else {
          setContent(page, (
            <LargePage>
              {page}
            </LargePage>)
          )
        }
      }, Math.ceil(Math.random() * 1e3))

      return () => clearTimeout(timeout)
    }}
    on_end={({ page, setContent }) => {
      setContent(page,
        <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.

<HeightLimit height="60rem">
  <PaginationTableExample />
</HeightLimit>

#InfinityScroller

#Demos

#Infinity scroller with load button

#Infinity scroller with custom load indicator

#Infinity scroller with unknown page_count