1.9.2 • Published 1 year ago
card-window v1.9.2
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.
// with npm
npm install card-window
// with yarn
yarn add card-window
Usage
Lean more at michiharu.github.io/card-window/
import * as React from 'react';
import ReactDOM from 'react-dom';
import { CardWindow, CardProps, range } from 'card-window';
const SampleCard: React.FC<CardProps> = ({ index, style, row, col }) => (
<div style={style}>
<h2>{index}</h2>
<p>row: {row}, col: {col}</p>
</div>
);
const App: React.FC = () => {
const data = range(10000); // [0, 1, 2, ..., 9999]
const cardRect = { width: 200, height: 120 };
return (
<div style={{ height: 400 }}>
<CardWindow data={data} cardRect={cardRect}>
{SampleCard}
</CardWindow>
</div>
);
};
ReactDOM.render(<App />, document.querySelector('#app'));
1.10.2
1 year ago
1.10.1
1 year ago
1.10.0
1 year ago
1.9.2
1 year ago
1.9.1
2 years ago
1.9.0
2 years ago
1.8.2
2 years ago
1.8.1
2 years ago
1.8.4
2 years ago
1.8.3
2 years ago
1.8.0
2 years ago
1.7.2
2 years ago
1.7.1
2 years ago
1.7.0
2 years ago
1.6.1
2 years ago
1.6.0
2 years ago
1.5.3
2 years ago
1.5.2
2 years ago
1.5.1
2 years ago
1.5.0
2 years ago
1.4.0
2 years ago
1.3.0
2 years ago
1.2.0
2 years ago
1.1.0
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago