A tiny vanilla, dependency free, virtualization library
Using npm:
$ npm install virtualized-list --save
const virtualizedList = new VirtualizedList(element, {
data: ['a', 'b', 'c', 'd'],
renderRow: (row, index) => {
const element = document.createElement('div');
element.innerHTML = row;
return element;
},
rowHeight: 150
)}
const virtualizedList = new VirtualizedList(element, {
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
renderRow: (row, index) => {
const element = document.createElement('div');
element.innerHTML = row;
return element;
},
rowHeight: [150, 120, 100, 80, 50, 35, 200, 500, 50, 300],
estimatedRowHeight: 155,
overscanCount: 5, // Number of rows to render above/below the visible rows.
onMount: () => {
// Once the component has mounted, we set an initial index to scrollTo
virtualizedList.scrollToIndex(10);
}
)}