khakurel / react-lazy-render

Lazy render for (very) large lists of data

React Lazy Render

Lazy render for (very) large lists of data

Demo

Features

• Only render children that are visible
• Incredibly simple to use
• BYOC - Bring your own child components

Install

The easiest way to use React Lazy Render is to install it from NPM and include it in your own build process (using Webpack, Browserify, etc).

npm install react-lazy-render

Usage

var LazyRender = require('react-lazy-render');

var children = [];
for (var i = 0; i < 5000; i++) {
  // each child must have a consistent height
  children.push(
    <div style={{ height: 20 }}>
      #{i}
    </div>
  );
}

<LazyRender maxHeight={300} className="my-list" itemPadding={5}>
  {children}
</LazyRender>

Contribute

We love contributions! Whether it is a simple typo fix or a wholesale rewrite to Haskell we'll get it merged as soon as we can. If you can't think of anything to do you can see a list of tasks that can be worked on in the issues list.

Building example page

Once you have the repository cloned run the following commands to get started:

npm install
npm install -g webpack gulp // we use webpack to build the js for the example page

Then in one shell run gulp develop and in another webpack -w --colors --progress. This will start a local server at http://localhost:9988 where you can see the example page. It will also watch for any files changes and rebuild.