React-large-virtualized-list NPM

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