react-infinite-scroll-list

React component for create an inifinte list

Stats

StarsIssuesVersionUpdatedCreatedSize
react-infinite-scroll-list
1844.0.04 years ago5 years agoMinified + gzip package size for react-infinite-scroll-list in KB

Readme

React Infinite List

npm version Build Status

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.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.