🚀 Socket Launch Week 🚀 Day 2: Introducing Repository Labels and Security Policies.Learn More
Socket
Sign inDemoInstall
Socket

virtualized-list

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

virtualized-list

A tiny, dependency free, virtualization library

2.2.0
latest
Source
npm
Version published
Maintainers
1
Created
Source

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

PropertyTypeRequired?Description
heightNumberHeight of List. This property will determine the number of rendered vs virtualized items
rowCountNumberThe number of rows you want to render
renderRowFunctionResponsible for rendering an item given it's index: ({index: number, style: Object}): React.PropTypes.node. The returned element must handle key and style.
rowHeightNumber, Array or FunctionEither 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
initialScrollTopNumberThe initial scrollTop value (optional)
initialIndexNumberInitial item index to scroll to (by forcefully scrolling if necessary)
overscanCountNumberNumber 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
estimatedRowHeightNumberUsed 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.
onMountFunctionCallback invoked once the virtual list has mounted.
onScrollFunctionCallback invoked onScroll. function (scrollTop, event)
onRowsRenderedFunctionCallback invoked with information about the range of rows just rendered

FAQs

Package last updated on 13 Jun 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts