{"id":13608353,"url":"https://github.com/developerdizzle/react-virtual-list","last_synced_at":"2025-05-16T12:00:16.701Z","repository":{"id":32571177,"uuid":"36154055","full_name":"developerdizzle/react-virtual-list","owner":"developerdizzle","description":"Super simple virtualized list React component","archived":false,"fork":false,"pushed_at":"2022-01-31T21:25:25.000Z","size":385,"stargazers_count":616,"open_issues_count":16,"forks_count":70,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-05-15T12:42:40.674Z","etag":null,"topics":["list","performance","react","render","scroll","virtual"],"latest_commit_sha":null,"homepage":"http://developerdizzle.github.io/react-virtual-list/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"Nyarum/betting","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/developerdizzle.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-05-24T03:29:59.000Z","updated_at":"2025-05-12T10:26:12.000Z","dependencies_parsed_at":"2022-09-13T22:10:17.806Z","dependency_job_id":null,"html_url":"https://github.com/developerdizzle/react-virtual-list","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developerdizzle%2Freact-virtual-list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developerdizzle%2Freact-virtual-list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developerdizzle%2Freact-virtual-list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developerdizzle%2Freact-virtual-list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/developerdizzle","download_url":"https://codeload.github.com/developerdizzle/react-virtual-list/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254527070,"owners_count":22085917,"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":["list","performance","react","render","scroll","virtual"],"created_at":"2024-08-01T19:01:26.584Z","updated_at":"2025-05-16T12:00:16.639Z","avatar_url":"https://github.com/developerdizzle.png","language":"JavaScript","readme":"# [react-virtual-list](http://developerdizzle.github.io/react-virtual-list/) [![Build Status](https://travis-ci.org/developerdizzle/react-virtual-list.svg?branch=master)](https://travis-ci.org/developerdizzle/react-virtual-list) [![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/react.svg)](https://bundlephobia.com/result?p=react-virtual-list)\n\n\nSuper simple virtualized list [higher-order component](https://facebook.github.io/react/docs/higher-order-components.html) for [React](https://github.com/facebook/react) version `^15.0.0 || ^16.0.0`.\n\n[Check out the demo here](http://developerdizzle.github.io/react-virtual-list)\n\n`react-virtual-list` allows you to display a large list of fixed-height items, while only rendering the items visible on the screen.  This allows a large list to be rendered with much fewer DOM elements.\n\n### Some other benefits:\n* One dependency (and it's `prop-types`)\n* [Small!](https://bundlephobia.com/result?p=react-virtual-list)\n* Performant - demo page almost always stays over 60fps [http://i.imgur.com/CHVCK9x.png](http://i.imgur.com/CHVCK9x.png)\n* Keeps your components separate - as a higher-order component\n* Gives you control - doesn't force any particular markup, but gives you the necessary styles and data to use.\n\n## Legacy\n\nIf you're looking for documentation on version 1, supporting React `~0.13.x`, it's [here](README.v1.md).\n\n## Installation\n\nYou can use [npm](https://npmjs.org) to install [react-virtual-list](https://www.npmjs.com/package/react-virtual-list).\n\n```console\n\u003e npm install react-virtual-list --save\n```\n\n## Usage\n\nThe `./lib/VirtualList.js` module exports a single, ES5-compatible, CommonJS-accessible, component factory.\n\n```js\nimport VirtualList from 'react-virtual-list';\n```\n\nYour inner list component uses the `virtual` property to render the visible items, and set a style to set the overall list height and padding.\n\n```js\nconst MyList = ({\n  virtual,\n  itemHeight,\n}) =\u003e (\n  \u003cul style={virtual.style}\u003e\n    {virtual.items.map(item =\u003e (\n      \u003cli key={`item_${item.id}`} style={{height: itemHeight}}\u003e\n        Lorem ipsum dolor sit amet\n      \u003c/li\u003e\n    ))}\n  \u003c/ul\u003e\n);\n```\n\n**Note:** You should set [keys](https://facebook.github.io/react/docs/lists-and-keys.html) on your list items.\n\nCreate the virtualized component.\n\n```js\nconst MyVirtualList = VirtualList()(MyList);\n```\n\nWrite the JSX for the virtualized component with the necessary [properties](#properties).\n\n```js\n\u003cMyVirtualList\n  items={myBigListOfItems}\n  itemHeight={100}\n/\u003e\n```\n\n#### Options\n\nOptions are used before the virtualized component can be created.  This means that if you need to change an option after the initial render, you will need to recreate the virtualized component.\n\n```js\nconst options = {\n  container: this.refs.container, // use this scrollable element as a container\n  initialState: {\n    firstItemIndex: 0, // show first ten items\n    lastItemIndex: 9,  // during initial render\n  },\n};\n\nconst MyVirtualList = VirtualList(options)(MyList);\n```\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`container` | DOM Element | window | Scrollable element that contains the list.  Use this if you have a list inside an element with `overflow: scroll`.\n`initialState` | object | - | An object with `firstItemIndex` and `lastItemIndex` properties, which represent array indexes of `items` (see below).  These are used to calculate the visible items before the component is mounted.  Useful for server-side rendering.\n\n#### Properties\n\nThese properties and any others set on your virtual component, such as `className`, will be passed down to the inner component.\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`items` | Array | - | Full array of list items.  Only the visible subset of these will be rendered.\n`itemHeight` | Number | - | Height in pixels of a single item.  **You must have a CSS rule that sets the height of each list item to this value.**\n`itemBuffer` | Number | 0 | Number of items that should be rendered before and after the visible viewport.  Try using this if you have a complex list that suffers from a bit of lag when scrolling.\n\n#### Mapping\n\n`VirtualList` allows a second, optional, parameter, named `mapVirtualToProps`, which functions similarly to [Redux's `mapStateToProps`](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options).  This function can be provided to change the properties passed to `MyList`.  Its arguments are:\n\nName | Description\n--- | ---\n`props` | Includes all properties passed to `MyVirtualList`\n`state` | Includes `firstItemIndex` and `lastItemIndex`; array indexes of the visible bounds of `items`\n\nThe default `mapVirtualToProps` can be found [here](/src/utils/defaultMapVirtualToProps.js).\n\n#### Example Usage\n\nCheck out [demo/src/app.js](demo/src/app.js) and [demo/src/ConfigurableExample.js](demo/src/ConfigurableExample.js) for the example used in the [demo](http://developerdizzle.github.io/react-virtual-list).\n\n## Tests\n\nUse `npm test` to run the tests using [Jest](https://github.com/facebook/jest).  Not everything is currently tested yet!\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeveloperdizzle%2Freact-virtual-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdeveloperdizzle%2Freact-virtual-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeveloperdizzle%2Freact-virtual-list/lists"}