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
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 bundel. Brower shall be opened on port 3000.
v0.2.0 (2015-06-02)
numOfVisibleItems
parameter was removed in favor of height
. See README.md and example.jsx
for more details. Basically, the whole list height is more convenient to use and often specified
by UX ppl in advance. Number of visible items are calcualted based on height
and itemHeight
by the component itself.