An open API service indexing awesome lists of open source software.

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

Awesome Lists containing this project

README

          

# React Infinite List

[![npm version](https://badge.fury.io/js/react-infinite-scroll-list.svg)](https://badge.fury.io/js/react-infinite-scroll-list) [![Build Status](https://travis-ci.org/samouss/react-infinite-scroll-list.svg?branch=master)](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
```