Repolode
Submit
bvaughn

bvaughn/react-window

React components for efficiently rendering large lists and tabular data by only mounting the rows and cells that are visible.

View on GitHubWebsite
Stars
17,199
Forks
815
Open issues
0
Last commit
4 hours ago

What is it?

react-window is a React component library for displaying long lists and grids without the slowdown that comes from rendering thousands of DOM nodes at once. It provides a List component for row-based data and a Grid component for data laid out in rows and columns, and renders only the items inside the visible viewport plus a configurable overscan buffer.

Both components take a row or cell renderer component and a count, along with optional props for fixed or dynamic sizes, percentage-based dimensions, custom keys, and scroll positioning. Scrolling can be driven by the component's own container or by an ancestor element or the window, and an imperative ref exposes scroll methods. TypeScript definitions ship with the npm package.

The library is installed from npm and is aimed at React developers who need to render large datasets in the browser. Full documentation and FAQs are hosted on the project's website.

Key features

  • 01Renders only visible rows or cells, keeping DOM size small for large datasets
  • 02Provides List for row data and Grid for two-dimensional tabular data
  • 03Supports fixed, percentage, and function-based row heights and column widths
  • 04Offers dynamic row height measurement through a hook
  • 05Can scroll with the window or an ancestor element via scrollElement
  • 06Includes an imperative ref API for scrolling and TypeScript types

Use cases

  • Rendering chat messages, logs, or feeds with thousands of entries in a React app
  • Building data tables or spreadsheet-like grids in a web dashboard
  • Displaying long dropdown or select option lists without lag
  • Embedding a virtualized list inside a page that scrolls with the window

Quick start

  1. 1

    Install the library from NPM

    npm install react-window
  2. 2

    TypeScript definitions are included in the published dist folder; see the documentation site for usage

Things to know

  • Dynamic row heights are less efficient than predetermined sizes, according to the README.

Topics

#react#virtualization#list#grid#performance#typescript#ui-components

FAQ

What is react-window?
React components for efficiently rendering large lists and tabular data by only mounting the rows and cells that are visible. react-window is a React component library for displaying long lists and grids without the slowdown that comes from rendering thousands of DOM nodes at once. It provides a List component for row-based data and a Grid component for data laid out in rows and columns, and renders only the items inside the visible viewport plus a configurable overscan buffer.
Is react-window free to use? What license does it have?
react-window is open source under the MIT license. Check the license terms before using it in commercial products.
Is react-window still maintained?
Actively maintained. The last commit to react-window was on Oct 22, 2026.
What can I use react-window for?
Rendering chat messages, logs, or feeds with thousands of entries in a React app Building data tables or spreadsheet-like grids in a web dashboard Displaying long dropdown or select option lists without lag Embedding a virtualized list inside a page that scrolls with the window
How do I install react-window?
Install the library from NPM: npm install react-window TypeScript definitions are included in the published dist folder; see the documentation site for usage
Where can I get react-window?
The source code and installation instructions are on GitHub: https://github.com/bvaughn/react-window

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects