responsive-react-window

A library similar to react-window but responsive

Consider using react-virtuoso

react-virtuoso is very similar to this package. It is more feature-rich and much more popular.

The whole story with responsive-react-window is rather embarrassing for me:

1. noticed that react-window is not responsive
2. implemented and published responsive-react-window
3. discovered react-virtuoso

I'll leave this package published as a redirection to react-virtuoso for those who are searching for a responsive version of react-window.

I also leave it here for personal use (surprise, I find the syntax to be better than react-virtuoso, although I admit I'm extremely biased).

Install

npm install --save responsive-react-window

Usage

Suppose you need to render a long list of items.

Long story short, instead of:

function LongList(props) {
  return (
    <div>
      {props.entries.map((entry) => (
        <Item {...entry} />
      ))}
    </div>
  );
}

use this:

import { ResponsiveReactWindow } from 'responsive-react-window';
function LongList(props) {
  return (
    <ResponsiveReactWindow entries={props.entries} ItemComponent={Item} />
  );
}

Usage examples

Comparison to react-window

	react-window	responsive-react-window
Replaces hidden items with	CSS styles	placeholder HTML element
Items sizes are	specified in props	measured automatically
Items Responsiveness	needs to be implemented by you	works out of the box

License

MIT © Romex91