{"id":13455674,"url":"https://github.com/clauderic/react-tiny-virtual-list","last_synced_at":"2025-05-14T05:00:27.872Z","repository":{"id":39618238,"uuid":"83269095","full_name":"clauderic/react-tiny-virtual-list","owner":"clauderic","description":"A tiny but mighty 3kb list virtualization library, with zero dependencies 💪 Supports variable heights/widths, sticky items, scrolling to index, and more!","archived":false,"fork":false,"pushed_at":"2023-04-11T03:46:12.000Z","size":956,"stargazers_count":2481,"open_issues_count":54,"forks_count":164,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-05-12T21:04:53.228Z","etag":null,"topics":["react","react-component","virtual-scroll","virtualization","windowing"],"latest_commit_sha":null,"homepage":"https://clauderic.github.io/react-tiny-virtual-list/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/clauderic.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-02-27T04:46:57.000Z","updated_at":"2025-05-12T10:26:00.000Z","dependencies_parsed_at":"2024-01-16T04:31:56.921Z","dependency_job_id":"ae118fa9-8edf-471a-9e1f-9b364e0a8a43","html_url":"https://github.com/clauderic/react-tiny-virtual-list","commit_stats":{"total_commits":80,"total_committers":9,"mean_commits":8.88888888888889,"dds":"0.38749999999999996","last_synced_commit":"bf907992f1f18fffa92256abcd73ff577b92adec"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clauderic%2Freact-tiny-virtual-list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clauderic%2Freact-tiny-virtual-list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clauderic%2Freact-tiny-virtual-list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clauderic%2Freact-tiny-virtual-list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/clauderic","download_url":"https://codeload.github.com/clauderic/react-tiny-virtual-list/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254076330,"owners_count":22010597,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-component","virtual-scroll","virtualization","windowing"],"created_at":"2024-07-31T08:01:09.150Z","updated_at":"2025-05-14T05:00:27.840Z","avatar_url":"https://github.com/clauderic.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","React Virtualization","⚛️ React"],"sub_categories":["React Components","React-specific libs:"],"readme":"\u003cdiv align=\"center\" style=\"margin-bottom: 30px;\"\u003e\n\u003cimg src=\"https://cloud.githubusercontent.com/assets/1416436/23387281/9a628ec4-fd29-11e6-9a1a-09f755c21a14.png\" width=\"224\"/\u003e\n\u003c/div\u003e\n\n# react-tiny-virtual-list\n\n\u003e A tiny but mighty list virtualization library, with zero dependencies 💪\n\n[![npm version](https://img.shields.io/npm/v/react-tiny-virtual-list.svg)](https://www.npmjs.com/package/react-tiny-virtual-list)\n[![npm downloads](https://img.shields.io/npm/dm/react-tiny-virtual-list.svg)](https://www.npmjs.com/package/react-tiny-virtual-list)\n[![Build Status](https://travis-ci.org/clauderic/react-tiny-virtual-list.svg?branch=master)](https://travis-ci.org/clauderic/react-tiny-virtual-list)\n[![codecov](https://codecov.io/gh/clauderic/react-tiny-virtual-list/branch/master/graph/badge.svg)](https://codecov.io/gh/clauderic/react-tiny-virtual-list)\n![typescript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-blue.svg)\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://github.com/clauderic/react-tiny-virtual-list/blob/master/LICENSE)\n[![Gitter](https://badges.gitter.im/clauderic/react-tiny-virtual-list.svg)](https://gitter.im/clauderic/react-tiny-virtual-list)\n\n- **Tiny \u0026 dependency free** – Only 3kb gzipped\n- **Render millions of items**, without breaking a sweat\n- **Scroll to index** or **set the initial scroll offset**\n- **Supports fixed** or **variable** heights/widths\n- **Vertical** or **Horizontal** lists\n\nCheck 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).\n\n## Getting Started\n\nUsing [npm](https://www.npmjs.com/):\n\n```\nnpm install react-tiny-virtual-list --save\n```\n\nES6, CommonJS, and UMD builds are available with each distribution. For example:\n\n```js\nimport VirtualList from 'react-tiny-virtual-list';\n```\n\nYou can also use a global-friendly UMD build:\n\n```html\n\u003cscript src=\"react-tiny-virtual-list/umd/react-tiny-virtual-list.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\nvar VirtualList = window.VirtualList;\n...\n\u003c/script\u003e\n```\n\n## Example usage\n\n```js\nimport React from 'react';\nimport {render} from 'react-dom';\nimport VirtualList from 'react-tiny-virtual-list';\n\nconst data = ['A', 'B', 'C', 'D', 'E', 'F', ...];\n\nrender(\n \u003cVirtualList\n width='100%'\n height={600}\n itemCount={data.length}\n itemSize={50} // Also supports variable heights (array or function getter)\n renderItem={({index, style}) =\u003e\n \u003cdiv key={index} style={style}\u003e // The style property contains the item's absolute position\n Letter: {data[index]}, Row: #{index}\n \u003c/div\u003e\n }\n /\u003e,\n document.getElementById('root')\n);\n```\n\n### Prop Types\n\n| Property | Type | Required? | Description |\n| :---------------- | :----------------- | :-------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| width | Number \\| String\\* | ✓ | Width of List. This property will determine the number of rendered items when scrollDirection is `'horizontal'`. |\n| height | Number \\| String\\* | ✓ | Height of List. This property will determine the number of rendered items when scrollDirection is `'vertical'`. |\n| itemCount | Number | ✓ | The number of items you want to render |\n| 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. |\n| 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` |\n| scrollDirection | String | | Whether the list should scroll vertically or horizontally. One of `'vertical'` (default) or `'horizontal'`. |\n| scrollOffset | Number | | Can be used to control the scroll offset; Also useful for setting an initial scroll offset |\n| scrollToIndex | Number | | Item index to scroll to (by forcefully scrolling if necessary) x |\n| 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. |\n| stickyIndices | Number[] | | An array of indexes (eg. `[0, 10, 25, 30]`) to make certain items in the list sticky (`position: sticky`) |\n| 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. |\n| 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. |\n| 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})`. |\n| onScroll | Function | | Callback invoked whenever the scroll offset changes within the inner scrollable region. It has the following signature: `(scrollTop: number, event: React.UIEvent\u003cHTMLDivElement\u003e)`. |\n\n_\\* Width may only be a string when `scrollDirection` is `'vertical'`. Similarly, Height may only be a string if `scrollDirection` is `'horizontal'`_\n\n### Public Methods\n\n#### recomputeSizes (index: number)\n\nThis method force recomputes the item sizes after the specified index (these are normally cached).\n\n`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.\nHowever, 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.\n\n### Common Issues with PureComponent\n\n`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']` =\u003e `['d','e','f']`), `react-tiny-virtual-list` has no way to know your data has changed and that it needs to re-render.\n\nYou 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.\n\n## Reporting Issues\n\nFound 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.\n\n## Contributions\n\nFeature 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)\n\n## Acknowledgments\n\nThis 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 ❤️\n\n## License\n\nreact-tiny-virtual-list is available under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclauderic%2Freact-tiny-virtual-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclauderic%2Freact-tiny-virtual-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclauderic%2Freact-tiny-virtual-list/lists"}