https://github.com/samouss/react-infinite-scroll-list
Manage infinite list with the IntersectionObserver API
https://github.com/samouss/react-infinite-scroll-list
infinite infinite-lists infinite-scroll intersection-observer react scroll
Last synced: 2 months ago
JSON representation
Manage infinite list with the IntersectionObserver API
- Host: GitHub
- URL: https://github.com/samouss/react-infinite-scroll-list
- Owner: samouss
- License: mit
- Created: 2016-09-17T20:46:37.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2025-07-22T09:34:42.000Z (3 months ago)
- Last Synced: 2025-07-22T11:37:16.962Z (3 months ago)
- Topics: infinite, infinite-lists, infinite-scroll, intersection-observer, react, scroll
- Language: JavaScript
- Homepage: http://samouss.github.io/react-infinite-scroll-list
- Size: 2.29 MB
- Stars: 22
- Watchers: 2
- Forks: 2
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Infinite List
[](https://badge.fury.io/js/react-infinite-scroll-list) [](https://travis-ci.org/samouss/react-infinite-scroll-list)
## Installation
```
yarn add react-infinite-scroll-list
```**Note:** This library is based on the [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) API, it's not yet widely supported.
Check the [compatibility table](http://caniuse.com/#feat=intersectionobserver) and add a [Polyfill](https://github.com/w3c/IntersectionObserver/tree/gh-pages/polyfill) to your needs!> Check out the example on [Storybook](http://samouss.github.io/react-infinite-scroll-list)
## Usage
Import the module in your application:
```js
// 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:
```js
{
console.log('Load more content');
}}
containerClassName="custom-container-class-name"
sentinelClassName="custom-sentinel-class-name"
containerTagName="div"
sentinelTagName="div"
threshold={0}
>
{items.map(item =>{item.message})}```
## Run Storybook
```
yarn start-storybook
```## Build Storybook
```
yarn build-storybook
```## Run the test
```
yarn test
```