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-dev
# or
bower install react-infinite-list --save-dev

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

Changelog

v0.2.2 (2015-06-12)

Improved scrolling behavior with webkit. Sometimes, when using some point or touch devices whole page was scrolled to the bottom, even though the scroll event was emit from the list view.

Removed unecessary topItem in favor of padding of the first item. Also, styles need not to be passed down to the list item view.

Thanks crudo!