Github url

react-window

by bvaughn

bvaughn /react-window

React components for efficiently rendering large lists and tabular data

8.4K Stars 429 Forks Last release: over 1 year ago (1.3.1) MIT License 383 Commits 20 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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

Install

# Yarn yarn add react-window # NPM npm install --save react-window

Usage

Learn more at react-window.now.sh:

Related libraries

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

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

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.

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

Here's a Code Sandbox demo.

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

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.