Getting Started

Overview

kaskaid is a masonry layout for React with built-in windowing (virtualization), powered by @tanstack/react-virtual. Only the items in and around the viewport are rendered, so grids with thousands of items stay fast.

It ships in two flavors:

• <Masonry /> — a ready-made component that renders the masonry grid for you.
• useMasonry — a headless hook that returns prop bags you spread onto your own JSX.

Installation

Install the package along with its peer dependency:

Quick Start

Pass your items as data and render each one with renderItem:

import { Masonry } from 'kaskaid';
 
const DATA = [200, 600, 200, 400, 100, 600, 200, 400, 100, 600];
 
function App() {
  return (
    <Masonry
      data={DATA}
      estimateSize={() => 400}
      renderItem={({ item, index }) => <div style={{ height: item }}>{index}</div>}
    />
  );
}

estimateSize is optional in client-only mode — items are measured after mount. It is still recommended for large lists so off-screen items contribute to the total scroll size and lane balancing.

Lane Count

The lane (column) count is driven entirely by CSS: the library reads a --lanes custom property from the grid root, which it tags with data-kaskaid-grid. Media queries, container queries, or any other CSS mechanism can change it — no resize listeners in your code. See Styling & Responsive Lanes.

Next Steps

Each guide shows the same task twice: once with the <Masonry /> component, once with the useMasonry hook.

• Infinite Loading — fetch the next page as the grid scrolls.
• Scrolling in a Container — virtualize inside a panel instead of the page.
• Server-Side Rendering — ship pre-positioned items in the server HTML.
• Imperative Scrolling — jump to an item by index.
• Styling & Responsive Lanes — selectors, lane count, container queries.

Or jump straight to the <Masonry /> props, the useMasonry hook, or see it running on the Anatomy page.