virtualized-list

2.2.0 • Public • Published

virtualized-list

A tiny vanilla virtualization library, with DOM diffing

npm package Build Status codecov

Installation

Using npm:

npm install virtualized-list --save

Usage

Basic example

const rows = ['a', 'b', 'c', 'd'];
 
const virtualizedList = new VirtualizedList(container, {
  height: 500, // The height of the container
  rowCount: rows.length,
  renderRow: index => {
   const element = document.createElement('div');
   element.innerHTML = rows[index];
 
   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 = new VirtualizedList(container, {
  height: 400,
  rowCount: rows.length,
  renderRow: (row, index) => {
   const element = document.createElement('div');
   element.innerHTML = row;
 
   return element;
  },
  rowHeight: index => rowHeights[index],
  estimatedRowHeight: 155,
  overscanCount: 5, // Number of rows to render above/below the visible rows.
  initialScrollIndex: 8,
  onMount: () => {
    // Programatically scroll to item index #3 after 2 seconds
    setTimeout(() =>
      virtualizedList.scrollToIndex(3)
    , 2000);
  }
)}

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

Readme

Keywords

none

Package Sidebar

Install

npm i virtualized-list

Weekly Downloads

2,983

Version

2.2.0

License

MIT

Last publish

Collaborators

  • clauderic