responsive-react-window

A library similar to react-window but responsive

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 | | Responsiveness |needs to be implemented by you|works out of the box |

License

MIT © Romex91