simple-virtual-list
v1.1.4
Published
A simple and basic React virtual list
Downloads
23
Maintainers
Readme
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;