react-infinite

React Infinite

A browser-ready efficient scrolling container based on UITableView.

React Infinite 0.7.1 only supports React 0.14 and above. Please pin your package to 0.6.0 for React 0.13 support.

• Support for both static and variable element heights
• Built-in support for infinite loading of upcoming pages
• Ability to use the window as the scroll container
• Ability to be used as a chat/messaging-style display
• 94% test coverage with Jest and typechecked with Facebook's Flow
• Examples are available for experimentation

When a long list of DOM elements are placed in a scrollable container, all of them are kept in the DOM even when they are out the user's view. This is highly inefficient, especially in cases when scrolling lists can be tens or hundreds of thousands of items long. React Infinite solves this by rendering only DOM nodes that the user is able to see or might soon see. Other DOM nodes are clustered and rendered as a single blank node.

Installation

In the Browser

The relevant files are dist/react-infinite.js and dist/react-infinite.min.js. You must have React available as a global variable named React on the window. Including either file, through concatenation or a script tag, will produce a global variable named Infinite representing the component.

In NPM

React Infinite uses a Universal Module Definition so you can use it in NPM as well. npm install this package and

var Infinite = require('react-infinite');

In Browserify

If you want to use the source with Browserify, the ES5-compiled source is directly requirable from the /build folder off NPM.

Otherwise, you can follow the instructions for NPM.

Basic Use

Elements of Equal Height

To use React Infinite with a list of elements you want to make scrollable, provide them to React Infinite as children.

…

SeatGeek also currently uses React Infinite in production on our event pages; because we only have pages for events in the future, a link would not be appropriate. To see one, head to one of our team pages for the New York Giants, or the New York Mets, or the New York Knicks, and click on the green button for an event to see them in action in the Omnibox.

Contributing to React Infinite

Useful notes for how to contribute are available.