/ Infinite Scroll

React component to manage infinite list with the IntersectionObserver API

React component to manage infinite list with the IntersectionObserver API

React Infinite List

React component to manage infinite list with the IntersectionObserver API.

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-scroll-list';

// From CJS
const InfiniteList = require('react-infinite-scroll-list').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 Storybook

yarn start-storybook

Build Storybook

yarn build-storybook

Run the test

yarn test

GitHub