`react-window` is a component library that helps render large lists of data quickly and without the performance problems that often go along with rendering a lot of data. It's used in a lot of places, from React DevTools to the Replay browser.
## Support
If you like this project there are several ways to support it:
- [Become a GitHub sponsor](https://github.com/sponsors/bvaughn/)
- [Become an Open Collective sponsor](https://opencollective.com/react-window#sponsor)
- or [buy me a coffee](http://givebrian.coffee/)
The following wonderful companies and individuals have sponsored react-window:
## Installation
Begin by installing the library from NPM:
```sh
npm install react-window
```
## TypeScript types
TypeScript definitions are included within the published `dist` folder
## FAQs
Frequently asked questions can be found [here](https://react-window.vercel.app/common-questions).
## Documentation
Documentation for this project is available at [react-window.vercel.app](https://react-window.vercel.app/); version 1.x documentation can be found at [react-window-v1.vercel.app](https://react-window-v1.vercel.app/).
### List
Renders data with many rows.
#### Required props
| Name | Description |
|---|---|
| rowComponent | React component responsible for rendering a row. This component will receive an ℹ️ The prop types for this component are exported as |
| rowCount | Number of items to be rendered in the list. |
| rowHeight | Row height; the following formats are supported:
⚠️ Dynamic row heights are not as efficient as predetermined sizes. It's recommended to provide your own height values if they can be determined ahead of time. |
| rowProps | Additional props to be passed to the row-rendering component. List will automatically re-render rows when values in this object change. ⚠️ This object must not contain |
| Name | Description |
|---|---|
| className | CSS class name. |
| style | Optional CSS properties. The list of rows will fill the height defined by this style. |
| children | Additional content to be rendered within the list (above cells). This property can be used to render things like overlays or tooltips. |
| defaultHeight | Default height of list for initial render. This value is important for server rendering. |
| listRef | Ref used to interact with this component's imperative API. This API has imperative methods for scrolling and a getter for the outermost DOM element. ℹ️ The |
| onResize | Callback notified when the List's outermost HTMLElement resizes. This may be used to (re)scroll a row into view. |
| onRowsRendered | Callback notified when the range of visible rows changes. |
| overscanCount | How many additional rows to render outside of the visible area. This can reduce visual flickering near the edges of a list when scrolling. |
| rowKey | Lists use the row index as a ℹ️ Custom keys can ensure better UX for sortable or filterable lists, particularly if your row components are stateful. Refer to the React documentation for more info. ⚠️ This prop cannot be auto-memoized because it is called during render.
It is important to always |
| tagName | Can be used to override the root HTML element rendered by the List component. The default value is "div", meaning that List renders an HTMLDivElement as its root. ⚠️ In most use cases the default ARIA roles are sufficient and this prop is not needed. |
| Name | Description |
|---|---|
| cellComponent | React component responsible for rendering a cell. This component will receive an ℹ️ The prop types for this component are exported as |
| cellProps | Additional props to be passed to the cell-rendering component. Grid will automatically re-render cells when values in this object change. ⚠️ This object must not contain |
| columnCount | Number of columns to be rendered in the grid. |
| columnWidth | Column width; the following formats are supported:
|
| rowCount | Number of rows to be rendered in the grid. |
| rowHeight | Row height; the following formats are supported:
|
| Name | Description |
|---|---|
| className | CSS class name. |
| dir | Indicates the directionality of grid cells. ℹ️ See HTML |
| style | Optional CSS properties. The grid of cells will fill the height and width defined by this style. |
| children | Additional content to be rendered within the grid (above cells). This property can be used to render things like overlays or tooltips. |
| columnKey | Grids use the column index as a ℹ️ Custom keys can ensure better UX for sortable or filterable grids, particularly if your cell components are stateful. Refer to the React documentation for more info. ⚠️ This prop cannot be auto-memoized because it is called during render.
It is important to always |
| defaultHeight | Default height of grid for initial render. This value is important for server rendering. |
| defaultWidth | Default width of grid for initial render. This value is important for server rendering. |
| gridRef | Imperative Grid API. ℹ️ The |
| onCellsRendered | Callback notified when the range of rendered cells changes. |
| onResize | Callback notified when the Grid's outermost HTMLElement resizes. This may be used to (re)scroll a cell into view. |
| overscanCount | How many additional rows/columns to render outside of the visible area. This can reduce visual flickering near the edges of a grid when scrolling. |
| rowKey | Grids use the row index as a ℹ️ Custom keys can ensure better UX for sortable or filterable grids, particularly if your cell components are stateful. Refer to the React documentation for more info. ⚠️ This prop cannot be auto-memoized because it is called during render.
It is important to always |
| tagName | Can be used to override the root HTML element rendered by the List component. The default value is "div", meaning that List renders an HTMLDivElement as its root. ⚠️ In most use cases the default ARIA roles are sufficient and this prop is not needed. |