Skip to content

Commit 04a71dc

Browse files
committed
Update README
1 parent 1f8f3f3 commit 04a71dc

File tree

1 file changed

+44
-5
lines changed

1 file changed

+44
-5
lines changed

README.md

Lines changed: 44 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,20 @@
1-
React Infinite Scroller
2-
=======================
1+
# React Infinite Scroller
32

4-
[![Travis](https://img.shields.io/travis/danbovey/react-infinite-scroller.svg?style=flat-square)](https://travis-ci.org/danbovey/react-infinite-scroller)
53
[![npm](https://img.shields.io/npm/dt/react-infinite-scroller.svg?style=flat-square)](https://www.npmjs.com/package/react-infinite-scroller)
6-
[![React Version](https://img.shields.io/badge/React-%5E0.14.9%20%7C%7C%20%5E15.3.0%20%7C%7C%20%5E16.0.0-blue.svg?style=flat-square)](https://www.npmjs.com/package/react)
74
[![npm](https://img.shields.io/npm/v/react-infinite-scroller.svg?style=flat-square)](https://www.npmjs.com/package/react-infinite-scroller)
85
[![npm](https://img.shields.io/npm/l/react-infinite-scroller.svg?style=flat-square)](https://github.com/danbovey/react-infinite-scroller/blob/master/LICENSE)
96

10-
Infinitely load content using a React Component. This fork maintains a simple, lightweight infinite scroll package that supports both `window` and scrollable elements.
7+
Infinitely load a grid or list of items in React. This component allows you to create a simple, lightweight infinite scrolling page or element by supporting both window and scrollable elements.
8+
9+
- ⏬ Ability to use window or a scrollable element
10+
- 📏 No need to specify item heights
11+
- 💬 Support for "chat history" (reverse) mode
12+
- ✅ Fully unit tested and used in hundreds of production sites around the
13+
world!
14+
- 📦 Lightweight alternative to other available React scroll libs ~ 2.2KB
15+
minified & gzipped
16+
17+
---
1118

1219
- [Demo](https://danbovey.uk/react-infinite-scroller/demo/)
1320
- [Demo Source](https://github.com/danbovey/react-infinite-scroller/blob/master/docs/src/index.js)
@@ -93,3 +100,35 @@ You can define a custom `parentNode` element to base the scroll calulations on.
93100
| `threshold` | | `Number` | `250` | The distance in pixels before the end of the items that will trigger a call to `loadMore`. |
94101
| `useCapture` | | `Boolean` | `false` | Proxy to the `useCapture` option of the added event listeners. |
95102
| `useWindow` | | `Boolean` | `true` | Add scroll listeners to the window, or else, the component's `parentNode`. |
103+
104+
## Troubleshooting
105+
106+
### Double or non-stop calls to `loadMore`
107+
108+
If you experience double or non-stop calls to your `loadMore` callback, make
109+
sure you have your CSS layout working properly before adding this component in.
110+
Calculations are made based on the height of the container (the element the
111+
component creates to wrap the items), so the height of the container must equal
112+
the entire height of the items.
113+
114+
```css
115+
.my-container {
116+
overflow: auto;
117+
}
118+
```
119+
120+
Some people have found success using [react-infinite-scroll-component](https://github.com/ankeetmaini/react-infinite-scroll-component).
121+
122+
### But you should just add an `isLoading` prop!
123+
124+
This component doesn't make any assumptions about what you do in terms of API
125+
calls. It's up to you to store whether you are currently loading items from an
126+
API in your state/reducers so that you don't make overlapping API calls.
127+
128+
```js
129+
loadMore() {
130+
if(!this.state.isLoading) {
131+
this.props.fetchItems();
132+
}
133+
}
134+
```

0 commit comments

Comments
 (0)