card-window

Card window works by only rendering part of a large data set (just enough to fill the viewport). It is very much inspired by Brian Vaughn's react-window.

Installation

card-window is available as an npm package.

1// with npm
2npm install card-window
3
4// with yarn
5yarn add card-window

Usage

Lean more at michiharu.github.io/card-window/

1import * as React from 'react';
2import ReactDOM from 'react-dom';
3
4import { CardWindow, CardProps, range } from 'card-window';
5
6const SampleCard: React.FC<CardProps> = ({ index, style, row, col }) => (
7  <div style={style}>
8    <h2>{index}</h2>
9    <p>row: {row}, col: {col}</p>
10  </div>
11);
12
13const App: React.FC = () => {
14  const data = range(10000); // [0, 1, 2, ..., 9999]
15  const cardRect = { width: 200, height: 120 };
16  return (
17    <div style={{ height: 400 }}>
18      <CardWindow data={data} cardRect={cardRect}>
19        {SampleCard}
20      </CardWindow>
21    </div>
22  );
23};
24
25ReactDOM.render(<App />, document.querySelector('#app'));