Narcissistic, Perfectly Modest


    1.8.1-sticky • Public • Published


    React components for efficiently rendering large lists and tabular data

    NPM registry Travis NPM license


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


    Learn more at

    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.

    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.


    MIT © bvaughn


    npm i sticky-react-window

    DownloadsWeekly Downloads






    Unpacked Size

    247 kB

    Total Files


    Last publish


    • bt_developers