Merge pull request #292 from danbovey/update-readme

Author: danbovey

README.md

@@ -1,13 +1,20 @@
-React Infinite Scroller
-=======================
+# React Infinite Scroller
 
-[![Travis](https://img.shields.io/travis/danbovey/react-infinite-scroller.svg?style=flat-square)](https://travis-ci.org/danbovey/react-infinite-scroller)
 [![npm](https://img.shields.io/npm/dt/react-infinite-scroller.svg?style=flat-square)](https://www.npmjs.com/package/react-infinite-scroller)
-[![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)
 [![npm](https://img.shields.io/npm/v/react-infinite-scroller.svg?style=flat-square)](https://www.npmjs.com/package/react-infinite-scroller)
 [![npm](https://img.shields.io/npm/l/react-infinite-scroller.svg?style=flat-square)](https://github.com/danbovey/react-infinite-scroller/blob/master/LICENSE)
 
-Infinitely load content using a React Component. This fork maintains a simple, lightweight infinite scroll package that supports both `window` and scrollable elements.
+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.
+
+- ⏬ Ability to use window or a scrollable element
+- 📏 No need to specify item heights
+- 💬 Support for "chat history" (reverse) mode
+- ✅ Fully unit tested and used in hundreds of production sites around the
+  world!
+- 📦 Lightweight alternative to other available React scroll libs ~ 2.2KB
+  minified & gzipped
+
+---
 
 - [Demo](https://danbovey.uk/react-infinite-scroller/demo/)
 - [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.
 | `threshold`       |          | `Number`     | `250`     | The distance in pixels before the end of the items that will trigger a call to `loadMore`.                                                                                          |
 | `useCapture`      |          | `Boolean`    | `false`   | Proxy to the `useCapture` option of the added event listeners.                                                                                                                      |
 | `useWindow`       |          | `Boolean`    | `true`    | Add scroll listeners to the window, or else, the component's `parentNode`.                                                                                                          |
+
+## Troubleshooting
+
+### Double or non-stop calls to `loadMore`
+
+If you experience double or non-stop calls to your `loadMore` callback, make
+sure you have your CSS layout working properly before adding this component in.
+Calculations are made based on the height of the container (the element the
+component creates to wrap the items), so the height of the container must equal
+the entire height of the items.
+
+```css
+.my-container {
+  overflow: auto;
+}
+```
+
+Some people have found success using [react-infinite-scroll-component](https://github.com/ankeetmaini/react-infinite-scroll-component).
+
+### But you should just add an `isLoading` prop!
+
+This component doesn't make any assumptions about what you do in terms of API
+calls. It's up to you to store whether you are currently loading items from an
+API in your state/reducers so that you don't make overlapping API calls.
+
+```js
+loadMore() {
+  if(!this.state.isLoading) {
+    this.props.fetchItems();
+  }
+}
+```