Skip to content
React components for efficiently rendering large lists and tabular data
Branch: master
Clone or download
Latest commit 8928783 Mar 21, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Check for undefined window to support SSR Mar 18, 2019
website React deps bump Mar 21, 2019
.editorconfig init create-react-library@2.3.6 May 5, 2018
.eslintignore Renamed "example" dir to "website" Jun 8, 2018
.eslintrc Initial commit May 5, 2018
.flowconfig
.gitignore Removed package-lock.json and added it to .gitignore file Jul 22, 2018
.prettierignore Renamed "example" dir to "website" Jun 8, 2018
.prettierrc
.travis.yml Rename NPPM 'flow:check' script to 'flow' Oct 3, 2018
CHANGELOG.md
LICENSE.md Create LICENSE.md Feb 21, 2019
README.md Added an example of sticky items to FAQs Mar 19, 2019
babel.config.js
flow-template
package.json
rollup.config.js Removed Rollup terser plug-in for now because it was bloating the bundle Mar 4, 2019
yarn.lock React deps bump Mar 21, 2019

README.md

react-window

React components for efficiently rendering large lists and tabular data

NPM registry Travis NPM license

Install

# Yarn
yarn add react-window

# NPM
npm install --save react-window

Usage

Learn more at react-window.now.sh:

Related libraries

  • 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).

Frequently asked questions

How is 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:

  1. Use react-virtualized. (It's still widely used by a lot of successful projects!)
  2. Create a component that decorates one of the 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.

Can a list or a grid fill 100% the width or height of a page?

Yes. I recommend using the react-virtualized-auto-sizer package:

screen shot 2019-03-07 at 7 29 08 pm

Here's a Code Sandbox demo.

Why is my list blank when I scroll?

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!

screen shot 2019-03-07 at 7 21 48 pm

Can I lazy load data for my list?

Yes. I recommend using the react-window-infinite-loader package:

screen shot 2019-03-07 at 7 32 32 pm

Here's a Code Sandbox demo.

Can I attach custom properties or event handlers?

Yes, using the outerElementType prop.

Screen Shot 2019-03-12 at 8 58 09 AM

Here's a Code Sandbox demo.

Does this library support "sticky" items?

Yes, although it requires a small amount of user code. Here's a Code Sandbox demo.

License

MIT © bvaughn

You can’t perform that action at this time.