react-window

React components for efficiently rendering large lists and tabular data.

From the horse's mouth, what is react-window?

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

The compoents react-window provides:

• FixedSizeList
• VariableSizeList
• FixedSizeGrid
• VariableSizeGrid

Get it: npm install react-window

Sample usage:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

import { FixedSizeList as List } from 'react-window';

const Column = ({ index, style }) => (
  <div style={style}>عمود {index}</div>
);

const Example = () => (
  <List
    direction="rtl"
    height={75}
    itemCount={1000}
    itemSize={100}
    layout="horizontal"
    width={300}
  >
    {Column}
  </List>
);

GIF FTW!

P.S: Don't miss to checkout the demos.