# react-infinite-scroll-list

> React component for create an inifinte list

Latest version **4.0.0** (published 2017-12-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-infinite-scroll-list
pnpm add react-infinite-scroll-list
yarn add react-infinite-scroll-list
bun add react-infinite-scroll-list
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads; no types.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 4.0.0 |
| Published | 2017-12-09 |
| First published | 2016-09-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 22 |
| Maintainers | samouss |
| Keywords | react, component, infinite, scroll, list, intersection-observer |

## Links

- npm: https://www.npmjs.com/package/react-infinite-scroll-list
- Repository: https://github.com/samouss/react-infinite-list
- npm.io page: https://npm.io/package/react-infinite-scroll-list

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 4.0.0 (latest) — 2017-12-09
- 3.0.0-beta.3 (next) — 2017-08-15
- 3.0.0 — 2017-08-25
- 3.0.0-beta.2 — 2017-08-14
- 3.0.0-beta.1 — 2017-08-14
- 2.0.0 — 2017-07-11
- 1.3.1 — 2017-07-11
- 1.2.1 — 2017-04-19
- 1.2.0 — 2017-03-12
- 1.1.0 — 2016-12-28
- 1.0.2 — 2016-09-19
- 1.0.1 — 2016-09-17
- 1.0.0 — 2016-09-17

## 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-list.svg?branch=master)](https://travis-ci.org/samouss/react-infinite-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!

## Usage

Import the module in your application:

```js
// 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:

```js
<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](example).

---
_Source: https://npm.io/package/react-infinite-scroll-list · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._