Only visible cards render
CardWindow mounts the cards in the rows that fill the view, plus a margin you set with overScanPx. Ten thousand
items mount about as many elements as one screenful.
card-window
Ten thousand cards.
One screenful of DOM.
A React component that renders only the cards of a large data set that fill the view.
CSS Grid decides the columns
Give each card a width and a height. The browser works out how many columns fit, and the count follows the frame as it resizes.
Inspired by react-window
The idea comes from Brian Vaughn’s react-window, applied to a grid of equal cards that wraps to the width of its frame.