react-large-virtualized-list

A Virtual vertical list component for React. Display thousands of list-items without compromising performance!

Overview

This component allows to create very big/long lists that work extremely fast. This is achieved by only rendering the part of the list that is visible in the viewport.

Demo

• Interactive Demo in StoryBook

Getting started

Install react-large-virtualized-list using npm.

1npm install react-large-virtualized-list --save

Then you can just import like so:

1import VirtualizedList from 'react-large-virtualized-list';
2
3// Now you can use <VirtualizedList {...props} />

Example

1import VirtualizedList from 'react-large-virtualized-list';
2...
3
4let items = [];
5
6for (var i = 0; i < 1000; i++) {
7  items.push({ id: Math.random(), title: `I am item ${i}` });
8}
9
10function renderItem(item, style, index) {
11  return <div key={item.id} style={style}>{item.title}</div>;
12}
13
14const wrapperStyle = { 'height': '300px', 'width': '100%', 'overflow': 'auto', 'position': 'absolute' }
15
16<VirtualizedList
17  wrapperTagName="div"
18  items={items}
19  renderItem={renderItem}
20  itemHeight={20}
21  overscanRowCount={10}
22  wrapperStyle={wrapperStyle}
23/>

Proptypes

The component accepts the following props:

• items (array, required) - array of all list items.
• itemHeight (number, required) - the height of a list-item in pixels.
• wrapperTagName (string, default: []) - Tag-name used for the root-element of the component.
• renderItem (function, default: (item, style, index) => <li key={index} style={style}>{Item ${index}}</li>) - The function that receives an item and a style-object as param and renders a single list item. Note: Every rendered list-item must have the passed styles object applied in order to render correctly!
• overscanRowCount (number, default: 0) - the number of items that may be rendered before and after the visible part of the list.
• wrapperStyle (object, default: {}) - Object containing css-styles that should be applied to the root-element of the component
• className (string, default: '') - Classname that will be applied to the root-element of the component

License

react-large-virtualized-list is available under the MIT License.