Snappy React Grid is a simple to use windowing solution for React, built with performance and simplicity in mind.

Use yarn to add it to your React app:

$ yarn add snappy-react-grid

import { SnappyReactGrid } from 'snappy-react-grid';

const items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const Item = ({ style, innerRef, item }) => (
  <div ref={innerRef} style={style}>
    <div style={{ height: '250px', background: '#f00' }}>
      <h1>{item}</h1>
    </div>
  </div>
);

const App = () => <SnappyReactGrid component={Item} items={items} />;

The data that is used to render the grid. This is passed down to the render component, but could be anything really.

This is used to render all the items. Some important props are passed down to this component:

The item data from the items array.

Apply this to the outermost DOM node for the styling to work.

Apply this as ref on the outermost DOM node. It is used to measure the item height and make sure that all items have the proper offset.

The amount of items to show by default. Used for server side rendering.

If you want to offset the default rendering (i.e. not start with the first item), you can override this. You should rarely have to touch this.

The amount of items to render per row.

The amount of rows outside the view that should be rendered. A higher number means less glitching when you scroll fast, but might cause performance issues.

CSS class that is applied to the div element that wraps the grid.

Called whenever the user scrolls with the current range of items in view as arguments. This can be used to implement side effects based on scrolling behaviour, such as automatically fetching more data etc.

Index of the first item that is in view.

Index of the last item that is in view.

If you have any problems with this module, please don't hesitate to open an issue in this repository.

Contributions are always appreciated!

To build this module, run yarn build.

To start the test runner, run yarn test.