virtualized-list
A tiny vanilla virtualization library, with DOM diffing
Installation
Using npm:
npm install virtualized-list --save
Usage
Basic example
const rows = 'a' 'b' 'c' 'd'; const virtualizedList = container height: 500 // The height of the container rowCount: rowslength { const element = document; elementinnerHTML = rowsindex; return element; } rowHeight: 150);
Advanced example
const rows = 1 2 3 4 5 6 7 8 9 10;const rowHeights = 150 120 100 80 50 35 200 500 50 300; const virtualizedList = container height: 400 rowCount: rowslength { const element = document; elementinnerHTML = row; return element; } rowHeightsindex estimatedRowHeight: 155 overscanCount: 5 // Number of rows to render above/below the visible rows. initialScrollIndex: 8 { // Programatically scroll to item index #3 after 2 seconds ; })
Options
Property | Type | Required? | Description |
---|---|---|---|
height | Number | ✓ | Height of List. This property will determine the number of rendered vs virtualized items |
rowCount | Number | ✓ | The number of rows you want to render |
renderRow | Function | ✓ | Responsible for rendering an item given it's index: ({index: number, style: Object}): React.PropTypes.node . The returned element must handle key and style. |
rowHeight | Number, Array or Function | ✓ | Either a fixed height, an array containing the heights of all the items in your list, or a function that returns the height of an item given its index: (index: number): number |
initialScrollTop | Number | The initial scrollTop value (optional) | |
initialIndex | Number | Initial item index to scroll to (by forcefully scrolling if necessary) | |
overscanCount | Number | Number of extra buffer items to render above/below the visible items. Tweaking this can help reduce scroll flickering on certain browsers/devices. Defaults to 3 |
|
estimatedRowHeight | Number | Used to estimate the total size of the list before all of its items have actually been measured. The estimated total height is progressively adjusted as items are rendered. | |
onMount | Function | Callback invoked once the virtual list has mounted. | |
onScroll | Function | Callback invoked onScroll. function (scrollTop, event) |
|
onRowsRendered | Function | Callback invoked with information about the range of rows just rendered |