react-window

react-window

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
• Become an Open Collective sponsor
• or buy me a coffee

The following wonderful companies and individuals have sponsored react-window:

Installation

Begin by installing the library from NPM:

npm install react-window

TypeScript types

TypeScript definitions are included within the published dist folder

Documentation

Documentation for this project is available at react-window.vercel.app; version 1.x documentation can be found at react-window-v1.vercel.app.

List

Required props

Name	Description
rowComponent	React component responsible for rendering a row. This component will receive an index and style prop by default. Additionally it will receive prop values passed to rowProps. ℹ️ The prop types for this component are exported as RowComponentProps
rowCount	Number of items to be rendered in the list.
rowHeight	Row height; the following formats are supported: number of pixels (number) percentage of the grid's current height (string) function that returns the row height (in pixels) given an index and cellProps dynamic row height cache returned by the useDynamicRowHeight hook ⚠️ 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 ariaAttributes, index, or style props.

Optional props

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 useListRef and useListCallbackRef hooks are exported for convenience use in TypeScript projects.
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.
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.

Grid

Required props

Name	Description
cellComponent	React component responsible for rendering a cell. This component will receive an index and style prop by default. Additionally it will receive prop values passed to cellProps. ℹ️ The prop types for this component are exported as CellComponentProps
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 ariaAttributes, columnIndex, rowIndex, or style props.
columnCount	Number of columns to be rendered in the grid.
columnWidth	Column width; the following formats are supported: number of pixels (number) percentage of the grid's current width (string) function that returns the row width (in pixels) given an index and cellProps
rowCount	Number of rows to be rendered in the grid.
rowHeight	Row height; the following formats are supported: number of pixels (number) percentage of the grid's current height (string) function that returns the row height (in pixels) given an index and cellProps

Optional props

Name	Description
className	CSS class name.
dir	Corresponds to the HTML dir attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/dir
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.
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	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 useGridRef and useGridCallbackRef hooks are exported for convenience use in TypeScript projects.
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.
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.

Similar packages

Other packages similar to react-window

react-virtualized

React-virtualized is another popular library for efficiently rendering large lists and tabular data in React applications. It offers a similar set of features to react-window but includes additional functionality such as cell measuring and dynamic grid layouts. However, react-window is often preferred for its simpler API and better performance in common use cases.

react-infinite

React-infinite is a package that helps in building infinite scrolling lists in React. It differs from react-window in that it focuses on providing an infinite scrolling experience rather than just windowing. React-infinite may be more suitable for use cases where the list length is not known upfront or can grow dynamically.

react-list

React-list is a versatile infinite scroll React component. It supports variable lengths, dynamic item sizes, horizontal layouts, and more. Compared to react-window, react-list has a more flexible API but may not be as optimized for performance in rendering large datasets.