Infinite scroll

Infinite scroll offers a frictionless pagination i.e an ability to scroll endlessly through multiple pages where succeeding pages get loaded into view as you scroll towards them. We might add the the necessary accessibility attributes into the component in the future but right now we can only recommend you use role="feed" and the links in the notes below especially when you use infinite scroll for a list of articles.

Usage

import InfiniteScroll from '@ui-pack/react/infinite-scroll'

function App(){
  const fetchImages = React.useCallback(page => {
    console.log({ page })
    return fetch(`https://picsum.photos/v2/list?page=${page}&limit=3`)
    .then(res => res.json())
  }, [])

  return (
    <Container id="scrollArea">
      <InfiniteScroll
        loadFunction={fetchImages}
        pageLimit={2}
        loadingMessage={<div>Loading...</div>}
        completionMessage={<div>The End</div>}
        scrollParentSelector="#scrollArea"
      >
        {item => 
          <div key={item.id}>
            <Image src={item.download_url} alt={item.author} />
          </div>
        }
      </InfiniteScroll>
    </Container>
  )
}
function App(){
  const fetchImages = React.useCallback(page => {
    console.log({ page })
    return fetch(`https://picsum.photos/v2/list?page=${page}&limit=3`)
    .then(res => res.json())
  }, [])
  return (
    <Container id="scrollArea">
      <InfiniteScroll
        loadFunction={fetchImages}
        pageLimit={2}
        loadingMessage={<div>Loading...</div>}
        completionMessage={<div>The End</div>}
        scrollParentSelector="#scrollArea"
      >
        {item => 
          <div key={item.id}>
            <Image src={item.download_url} alt={item.author} />
          </div>
        }
      </InfiniteScroll>
    </Container>
  )
}

Notes

• Various articles have pointed out accessibility issues with infinite scroll.
• In order to enable infinite scroll for screen reader users, use role=feed. More here and here

Props