react-infinite-scroll-list

React Infinite List

Installation

yarn add react-infinite-scroll-list

Note: This library is based on the IntersectionObserver API, it's not yet widely supported.
Check the compatibility table and add a Polyfill to your needs!

Usage

Import the module in your application:

// From ES6
import InfiniteList from 'react-infinite-list-scroll';
 
// From CJS
const InfiniteList = require('react-infinite-list-scroll').default;
 
// From global
const InfiniteList = ReactInfiniteScrollList.default;

Then use it juste like that:

<InfiniteList
  root="container|viewport"
  isLoading={true | false}
  isEndReached={true | false}
  onReachThreshold={() => {
    console.log('Load more content');
  }}
  containerClassName="custom-container-class-name"
  sentinelClassName="custom-sentinel-class-name"
  containerTagName="div"
  sentinelTagName="div"
  threshold={0}
>
  {items.map(item => <div key={item.id}>{item.message}</div>)}
</InfiniteList>

Run the test

yarn test

Example

Check out the documentation.