# react-tiny-virtual-list > A tiny but mighty list virtualization component, with zero dependencies ๐Ÿ’ช Latest version **2.2.0** (published 2018-07-31) ยท MIT license ยท 0 weekly downloads ## Install ```sh npm install react-tiny-virtual-list pnpm add react-tiny-virtual-list yarn add react-tiny-virtual-list bun add react-tiny-virtual-list ``` ## Health **Score 30/100 (F)** โ€” status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.2.0 | | Published | 2018-07-31 | | First published | 2017-02-27 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 1 | | Unpacked size | 114.4 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 2482 | | Author | Clauderic Demers | | Maintainers | clauderic | | Keywords | react, reactjs, react-component, virtual, list, scrolling, infinite, virtualized, virtualization, windowing | ## Links - npm: https://www.npmjs.com/package/react-tiny-virtual-list - Repository: https://github.com/clauderic/react-tiny-virtual-list - Issues: https://github.com/clauderic/react-tiny-virtual-list/issues - npm.io page: https://npm.io/package/react-tiny-virtual-list ## Dependencies (1) - [prop-types](https://npm.io/package/prop-types.md) ^15.5.7 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) โ€” 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) โ€” 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) โ€” 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) โ€” 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) โ€” 836.4K weekly downloads ## Recent versions - 2.2.0 (latest) โ€” 2018-07-31 - 2.0.0-rc.1 (next) โ€” 2017-03-01 - 2.1.6 โ€” 2018-06-25 - 2.1.5 โ€” 2018-06-24 - 2.1.4 โ€” 2017-10-24 - 2.1.3 โ€” 2017-10-22 - 2.1.2 โ€” 2017-09-01 - 2.1.1 โ€” 2017-08-31 - 2.1.0 โ€” 2017-08-31 - 2.0.6 โ€” 2017-07-14 - 2.0.5 โ€” 2017-04-29 - 2.0.4 โ€” 2017-04-12 - 2.0.3 โ€” 2017-03-31 - 2.0.2 โ€” 2017-03-31 - 2.0.1 โ€” 2017-03-02 - โ€ฆ 2 more at https://npm.io/package/react-tiny-virtual-list/versions ## README
# react-tiny-virtual-list > 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 - **Vertical** or **Horizontal** lists Check out the [demo](https://clauderic.github.io/react-tiny-virtual-list/) for some examples, or take it for a test drive right away in [Code Sandbox](https://codesandbox.io/s/kymm7z9qr). ## Getting Started Using [npm](https://www.npmjs.com/): ``` npm install react-tiny-virtual-list --save ``` ES6, CommonJS, and UMD builds are available with each distribution. For example: ```js import VirtualList from 'react-tiny-virtual-list'; ``` You can also use a global-friendly UMD build: ```html ``` ## Example usage ```js import React from 'react'; import {render} from 'react-dom'; import VirtualList from 'react-tiny-virtual-list'; const data = ['A', 'B', 'C', 'D', 'E', 'F', ...]; render(
// The style property contains the item's absolute position Letter: {data[index]}, Row: #{index}
} />, document.getElementById('root') ); ``` ### Prop Types | Property | Type | Required? | Description | | :---------------- | :----------------- | :-------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | width | Number \| String\* | โœ“ | Width of List. This property will determine the number of rendered items when scrollDirection is `'horizontal'`. | | height | Number \| String\* | โœ“ | Height of List. This property will determine the number of rendered items when scrollDirection is `'vertical'`. | | itemCount | Number | โœ“ | The number of items you want to render | | 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'`. | | scrollOffset | Number | | Can be used to control the scroll offset; Also useful for setting an initial scroll offset | | scrollToIndex | Number | | Item index to scroll to (by forcefully scrolling if necessary) x | | 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. | | stickyIndices | Number[] | | An array of indexes (eg. `[0, 10, 25, 30]`) to make certain items in the list sticky (`position: sticky`) | | 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)`. | _\* Width may only be a string when `scrollDirection` is `'vertical'`. Similarly, Height may only be a string if `scrollDirection` is `'horizontal'`_ ### Public Methods #### recomputeSizes (index: number) 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. ### Common Issues with PureComponent `react-tiny-virtual-list` uses [PureComponent](https://reactjs.org/docs/react-api.html#reactpurecomponent), so it only updates when it's props change. Therefore, if only the order of your data changes (eg `['a','b','c']` => `['d','e','f']`), `react-tiny-virtual-list` has no way to know your data has changed and that it needs to re-render. You can force it to re-render by calling [forceUpdate](https://reactjs.org/docs/react-component.html#forceupdate) on it or by passing it an extra prop that will change every time your data changes. ## Reporting Issues Found an issue? Please [report it](https://github.com/clauderic/react-tiny-virtual-list/issues) along with any relevant details to reproduce it. If you can, please provide a live demo replicating the issue you're describing. You can [fork this Code Sandbox](https://codesandbox.io/s/kymm7z9qr) as a starting point. ## Contributions 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) ## Acknowledgments 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 โค๏ธ ## License react-tiny-virtual-list is available under the MIT License. --- _Source: https://npm.io/package/react-tiny-virtual-list ยท Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._