React Window

React components for efficiently rendering large lists and tabular data

README

react-window


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:
1. It reduces the amount of work (and time) required to render the initial view and to process updates.
2. It reduces the memory footprint by avoiding over-allocation of DOM nodes.
NPM registry Travis NPM license OpenCollective OpenCollective

Sponsors


The following wonderful companies have sponsored react-window:




Install


  1. ``` sh
  2. # Yarn
  3. yarn add react-window

  4. # NPM
  5. npm install --save react-window
  6. ```

Usage


Learn more at react-window.now.sh:

Related libraries


[react-virtualized-auto-sizer](https://npmjs.com/package/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](https://npmjs.com/package/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](https://www.npmjs.com/package/react-vtree): Lightweight and flexible solution to render large tree structures (e.g., file system).

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 **smaller**1 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](https://npmjs.com/package/react-virtualized-auto-sizer):

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


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](https://npmjs.com/package/react-window-infinite-loader):

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


Can I attach custom properties or event handlers?


Yes, using the outerElementType prop.

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


Can I add padding to the top and bottom of a list?


Yes, although it requires a bit of inline styling.

Screen Shot 2019-06-02 at 8 38 18 PM


Can I add gutter or padding between items?


Yes, although it requires a bit of inline styling.

Screen Shot 2019-03-26 at 6 33 56 PM


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