react-window
Advanced tools
Package description
The react-window npm package is a React component library that provides efficient rendering of large lists and tabular data. It works by only rendering the items that are currently visible within the viewport, which can significantly improve the performance of applications that need to display large amounts of data.
Fixed Size List
This feature allows you to render a list where each item has a fixed size. The FixedSizeList component requires you to specify the height and width of the list container, the number of items, and the size of each item.
import { FixedSizeList } from 'react-window';
function App() {
return (
<FixedSizeList
height={150}
itemCount={1000}
itemSize={35}
width={300}
>
{({ index, style }) => <div style={style}>Row {index}</div>}
</FixedSizeList>
);
}Variable Size List
This feature is similar to the FixedSizeList but allows for items with variable sizes. The VariableSizeList component requires an itemSize function that returns the size of an item given its index.
import { VariableSizeList } from 'react-window';
const rowHeights = new Array(1000).fill(true).map(() => 25 + Math.round(Math.random() * 50));
function App() {
return (
<VariableSizeList
height={150}
itemCount={1000}
itemSize={index => rowHeights[index]}
width={300}
>
{({ index, style }) => <div style={style}>Row {index}</div>}
</VariableSizeList>
);
}Fixed Size Grid
The FixedSizeGrid component allows you to render a grid (or table) where each cell has a fixed size. You need to specify the dimensions of the grid, the size of each cell, and the number of rows and columns.
import { FixedSizeGrid } from 'react-window';
function App() {
return (
<FixedSizeGrid
columnCount={100}
columnWidth={100}
height={150}
rowCount={1000}
rowHeight={35}
width={300}
>
{({ columnIndex, rowIndex, style }) => <div style={style}>Cell {rowIndex},{columnIndex}</div>}
</FixedSizeGrid>
);
}Variable Size Grid
The VariableSizeGrid component is used for rendering a grid where the size of cells can vary. It requires functions to determine the height of rows and the width of columns based on their indices.
import { VariableSizeGrid } from 'react-window';
const columnWidths = new Array(100).fill(true).map(() => 75 + Math.round(Math.random() * 50));
const rowHeights = new Array(1000).fill(true).map(() => 25 + Math.round(Math.random() * 50));
function App() {
return (
<VariableSizeGrid
columnCount={100}
columnWidth={index => columnWidths[index]}
height={150}
rowCount={1000}
rowHeight={index => rowHeights[index]}
width={300}
>
{({ columnIndex, rowIndex, style }) => <div style={style}>Cell {rowIndex},{columnIndex}</div>}
</VariableSizeGrid>
);
}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 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 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.
Changelog
1.8.10
Readme
React components for efficiently rendering large lists and tabular data
React window works by only rendering part of a large data set (just enough to fill the viewport). This helps address some common performance bottlenecks:
The following wonderful companies have sponsored react-window:
Learn more about becoming a sponsor!
# Yarn
yarn add react-window
# NPM
npm install --save react-window
Learn more at react-window.now.sh:
react-virtualized-auto-sizer: HOC that grows to fit all of the available space and passes the width and height values to its child.react-window-infinite-loader: Helps break large data sets down into chunks that can be just-in-time loaded as they are scrolled into view. It can also be used to create infinite loading lists (e.g. Facebook or Twitter).react-vtree: Lightweight and flexible solution to render large tree structures (e.g., file system).react-window different from react-virtualized?I wrote react-virtualized several years ago. At the time, I was new to both React and the concept of windowing. Because of this, I made a few API decisions that I later came to regret. One of these was adding too many non-essential features and components. Once you add something to an open source project, removing it is pretty painful for users.
react-window is a complete rewrite of react-virtualized. I didn't try to solve as many problems or support as many use cases. Instead I focused on making the package smaller1 and faster. I also put a lot of thought into making the API (and documentation) as beginner-friendly as possible (with the caveat that windowing is still kind of an advanced use case).
If react-window provides the functionality your project needs, I would strongly recommend using it instead of react-virtualized. However if you need features that only react-virtualized provides, you have two options:
react-virtualized. (It's still widely used by a lot of successful projects!)react-window primitives and adds the functionality you need. You may even want to release this component to NPM (as its own, standalone package)! 🙂1 - Adding a react-virtualized list to a CRA project increases the (gzipped) build size by ~33.5 KB. Adding a react-window list to a CRA project increases the (gzipped) build size by <2 KB.
Yes. I recommend using the react-virtualized-auto-sizer package:
Here's a Code Sandbox demo.
If your list looks something like this...
...then you probably forgot to use the style parameter! Libraries like react-window work by absolutely positioning the list items (via an inline style), so don't forget to attach it to the DOM element you render!
Yes. I recommend using the react-window-infinite-loader package:
Here's a Code Sandbox demo.
Yes, using the outerElementType prop.
Here's a Code Sandbox demo.
Yes, although it requires a bit of inline styling.
Here's a Code Sandbox demo.
Yes, although it requires a bit of inline styling.
Here's a Code Sandbox demo.
Yes, although it requires a small amount of user code. Here's a Code Sandbox demo.
MIT © bvaughn
FAQs
React components for efficiently rendering large, scrollable lists and tabular data
The npm package react-window receives a total of 1,589,947 weekly downloads. As such, react-window popularity was classified as popular.
We found that react-window demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.
Security News
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.