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.

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

Then you can just import like so:

import VirtualizedList from 'react-large-virtualized-list';

// Now you can use <VirtualizedList {...props} />

Example

import VirtualizedList from 'react-large-virtualized-list';
...

let items = [];

for (var i = 0; i < 1000; i++) {
  items.push({ id: Math.random(), title: `I am item ${i}` });
}

function renderItem(item, style, index) {
  return <div key={item.id} style={style}>{item.title}</div>;
}

const wrapperStyle = { 'height': '300px', 'width': '100%', 'overflow': 'auto', 'position': 'absolute' }

<VirtualizedList
  wrapperTagName="div"
  items={items}
  renderItem={renderItem}
  itemHeight={20}
  overscanRowCount={10}
  wrapperStyle={wrapperStyle}
/>

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.