simple-virtual-list

A simple and basic React virtual list to display large amount of data efficiently.

Installing

Using npm:

$ npm install simple-virtual-list

Using bower:

$ bower install simple-virtual-list

Using yarn:

$ yarn add simple-virtual-list

Using jsDelivr CDN:

<script src="https://cdn.jsdelivr.net/npm/simple-virtual-list/index.js"></script>

Using unpkg CDN:

<script src="https://unpkg.com/simple-virtual-list/index.js"></script>

Test it on codesandbox.

Example

import React from 'react';
import SimpleVirtualList from 'simple-virtual-list';
const data = [];
for (let i = 0; i < 500; i++) {
  data.push({ id: i + 1, title1: 'title - ' + (i + 1) });
}
const DemoApp = (props) => {
  return (
    <div style={{ height: '200px', width: '200px' }}>
      <SimpleVirtualList
        datasource={data} // mandatory
        rowHeight={21} // optional
        itemKey={'id'} // optional
        display={'title1'} // mandatory if there is no title key in records
        renderItem={(item) => <span>{item.title1} </span>} // optional
      />
    </div>
  );
};
export default DemoApp;