A tiny but mighty list virtualization component, with zero dependencies 💪. 

A tiny but mighty list virtualization component, with zero dependencies 💪

clauderic

react-tiny-virtual-list

Include TypeScript type definitions in npm package [#26](https://github.com/clauderic/react-tiny-virtual-list/issues/26)

Fixed build script for es modules build [#22](https://github.com/clauderic/react-tiny-virtual-list/issues/22)

Renamed `onRowsRendered` prop to `onItemsRendered`.

- Added `scrollToAlignment="auto"` option, which scrolls the least amount possible to ensure that the specified `scrollToIndex` item is fully visible [#19](https://github.com/clauderic/react-tiny-virtual-list/issues/19)

- Added `onRowsRendered` prop that is invoked with information about the slice of rows that were just rendered [#14](https://github.com/clauderic/react-tiny-virtual-list/issues/13)

- Converted project to TypeScript and added `types` entry to `package.json`

Fix PropType definitions for `width` and `height` props ([#13](https://github.com/clauderic/react-tiny-virtual-list/issues/13))

Fixes slow wheel scrolling / scroll-interruption issues with browsers such as Firefox (see [#7](https://github.com/clauderic/react-tiny-virtual-list/pull/7)). Thanks for the contribution [Magnitus-](https://github.com/Magnitus-)!

Use `prop-types` package for PropType validation for compatibility with React ^15.5

Fixes a bug introduced in `2.0.2` where `nextProps.estimatedItemSize` wasn't being passed down properly in `componentWillReceiveProps`

Added support for dynamic property updates to `itemCount` and `estimatedItemSize` [#3](https://github.com/clauderic/react-tiny-virtual-list/issues/3)

Fix certain unhandled scenarios in `componentWillReceiveProps`

Added support for horizontal lists via the `scrollDirection` prop

  "description": "A tiny but mighty list virtualization component, with zero dependencies 💪",

  "main": "build/react-tiny-virtual-list.cjs.js",

  "module": "build/react-tiny-virtual-list.es.js",

  "jsnext:main": "build/react-tiny-virtual-list.es.js",

    "build": "babel-node --presets es2015 ./config/build.js",

    "lint": "tslint './src/**/*.{ts,tsx}' --project tsconfig.json",

    "start": "nwb serve-react-app demo/src/index.tsx --config ./config/nwb/config.js",

    "test": "jest --config ./config/jest/config.json --no-cache",

    "test:coverage": "npm run test -- --coverage",

    "test:watch": "npm run test -- --watch",

    "test:ci": "npm run lint && npm run test && codecov"

    "awesome-typescript-loader": "^3.2.1",

    "babel-preset-typescript": "^7.0.0-alpha.19",

    "react-addons-test-utils": "^15.4.2",

    "rollup-plugin-node-resolve": "^3.0.0",

  "homepage": "https://github.com/clauderic/react-tiny-virtual-list",

    "url": "https://github.com/clauderic/react-tiny-virtual-list.git"

    "url": "https://github.com/clauderic/react-tiny-virtual-list/issues"

> A tiny but mighty list virtualization library, with zero dependencies 💪

[![npm version](https://img.shields.io/npm/v/react-tiny-virtual-list.svg)](https://www.npmjs.com/package/react-tiny-virtual-list)

[![npm downloads](https://img.shields.io/npm/dm/react-tiny-virtual-list.svg)](https://www.npmjs.com/package/react-tiny-virtual-list)

[![Build Status](https://travis-ci.org/clauderic/react-tiny-virtual-list.svg?branch=master)](https://travis-ci.org/clauderic/react-tiny-virtual-list)

[![codecov](https://codecov.io/gh/clauderic/react-tiny-virtual-list/branch/master/graph/badge.svg)](https://codecov.io/gh/clauderic/react-tiny-virtual-list)

![typescript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-blue.svg)

[![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://github.com/clauderic/react-tiny-virtual-list/blob/master/LICENSE)

[![Gitter](https://badges.gitter.im/clauderic/react-tiny-virtual-list.svg)](https://gitter.im/clauderic/react-tiny-virtual-list)

* **Tiny & dependency free** – Only 3kb gzipped

* **Render millions of items**, without breaking a sweat

* **Scroll to index** or **set the initial scroll offset**

* **Supports fixed** or **variable** heights/widths

Check out the [demo](https://clauderic.github.io/react-tiny-virtual-list/) for some examples.

npm install react-tiny-virtual-list --save

ES6, CommonJS, and UMD builds are available with each distribution. For example:

import VirtualList from 'react-tiny-virtual-list';

You can also use a global-friendly UMD build:

const data = ['A', 'B', 'C', 'D', 'E', 'F', ...];

    itemSize={50} // Also supports variable heights (array or function getter)

      <div key={index} style={style}> // The style property contains the item's absolute position

        Letter: {data[index]}, Row: #{index}

|:------------------|:------------------|:----------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|

| renderItem        | 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.                                                                                                                                                                                                                                                                        |

| itemSize          |                   | ✓         | Either a fixed height/width (depending on the scrollDirection), 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`                                                                                                                                                                                                           |

| scrollDirection   | String            |           | Whether the list should scroll vertically or horizontally. One of `'vertical'` (default) or `'horizontal'`.                                                                                                                                                                                                                                                                                                                          |

| scrollToAlignment | String            |           | Used in combination with `scrollToIndex`, this prop controls the alignment of the scrolled to item. One of: `'start'`, `'center'`, `'end'` or `'auto'`. Use `'start'` to always align items to the top of the container and `'end'` to align them bottom. Use `'center`' to align them in the middle of the container. `'auto'` scrolls the least amount possible to ensure that the specified `scrollToIndex` item is fully visible. |

| 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.                                                                                                                                                                                                                                                                                   |

| estimatedItemSize | 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.                                                                                                                                                                                                                                                         |

| onItemsRendered    | Function          |           | Callback invoked with information about the slice of rows/columns that were just rendered. It has the following signature: `({startIndex: number, stopIndex: number})`.                                                                                                                                                                                                                                                                      |

| onScroll          | Function          |           | Callback invoked whenever the scroll offset changes within the inner scrollable region. It has the following signature: `(scrollTop: number, event: React.UIEvent<HTMLDivElement>)`.                                                                                                                                                                                                                                                 |

*\* Width may only be a string when `scrollDirection` is `'vertical'`. Similarly, Height may only be a string if `scrollDirection` is `'horizontal'`*

This method force recomputes the item sizes after the specified index (these are normally cached).

`VirtualList` has no way of knowing when its underlying data has changed, since it only receives a itemSize property. If the itemSize is a `number`, this isn't an issue, as it can compare before and after values and automatically call `recomputeSizes` internally.

 However, if you're passing a function to `itemSize`, that type of comparison is error prone. In that event, you'll need to call `recomputeSizes` manually to inform the `VirtualList` that the size of its items has changed.

Found an issue? Please [report it](https://github.com/clauderic/react-tiny-virtual-list/issues) along with any relevant details to reproduce it.

Feature requests / pull requests are welcome, though please take a moment to make sure your contributions fits within the scope of the project. [Learn how to contribute](https://github.com/clauderic/react-tiny-virtual-list/blob/master/CONTRIBUTING.md)

This library draws inspiration from [react-virtualized](https://github.com/bvaughn/react-virtualized), and is meant as a bare-minimum replacement for the [List](https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md) component. If you're looking for a tiny, lightweight and dependency-free list virtualization library that supports variable heights, you're in the right place! If you're looking for something that supports more use-cases, I highly encourage you to check out [react-virtualized](https://github.com/bvaughn/react-virtualized) instead, it's a fantastic library ❤️

react-tiny-virtual-list is available under the MIT License.

		Changelog
		------------
		### 2.1.3
		Include TypeScript type definitions in npm package [#26](https://github.com/clauderic/react-tiny-virtual-list/issues/26)

		### 2.1.2
		@@ -4,0 +7,0 @@ Fixed build script for es modules build [#22](https://github.com/clauderic/react-tiny-virtual-list/issues/22)

		{
		"name": "react-tiny-virtual-list",
		"version": "2.1.2",
		"version": "2.1.3",
		"description": "A tiny but mighty list virtualization component, with zero dependencies 💪",
		@@ -10,3 +10,4 @@ "main": "build/react-tiny-virtual-list.cjs.js",
		"files": [
		"build"
		"build",
		"types"
		],
		@@ -13,0 +14,0 @@ "scripts": {

		@@ -16,2 +16,4 @@ <div align="center" style="margin-bottom: 30px;">

		<a target='_blank' rel='nofollow' href='https://app.codesponsor.io/link/oN9PDWZz8fQcbh9sxpDEUvD5/clauderic/react-tiny-virtual-list'> <img alt='Sponsor' width='888' height='68' src='https://app.codesponsor.io/embed/oN9PDWZz8fQcbh9sxpDEUvD5/clauderic/react-tiny-virtual-list.svg' /></a>

		* Tiny & dependency free – Only 3kb gzipped
		@@ -18,0 +20,0 @@ * Render millions of items, without breaking a sweat

Improved metrics