react-infinite-list

React Infinite List

A component that displays large list of data efficiently. Reuses DOM elements during scrolling. It uses different rendering approach than [https://github.com/Morhaus/react-list-view] or Ember ListView. Instead of transposing the item rows, it just re-renders the component whenever the top or bottom list item is scrolled out of the visible area.

Installation

npm install react-infinite-list --save
# or
bower install react-infinite-list --save

Usage

 <InfiniteList
        items={items}
        height={100}
        itemHeight={20}
        listItemClass={InfiniteListItem}
    />,

items, height and itemHeight are mandatory.

listItemClass is optional. Rather, it serves for default list item view overriding.

There are also some mandatory css rules:

    .infinite-list {
        overflow: auto;
        position: relative;
    }

    .infinite-list-content {
        margin: 0;
        position: absolute;
    }

Example

Clone this repo and run npm i. After the dependencies are installed, just issue:

npm start

and wait till webpack builds the bundle. Browser shall be opened on port 3000.

Build

npm run web-build