mates-virtual

Virtualisation directives for the Mates framework.

Extracted from mates core to keep the main bundle lean. Only install this if you need virtual scrolling or masonry layouts.

Install

npm install mates-virtual

Peer dependency: mates >= 0.3.0-beta.6

What's included

| Export | Description | |--------|-------------| | virtualList | Virtualised vertical list directive — only visible rows render. Supports dynamic heights via ResizeObserver. | | virtualMasonry | Virtualised masonry grid — variable-height tiles, only visible ones in the DOM. | | masonryGrid | CSS multi-column masonry directive with lazy-loading images and infinite scroll support. |

Usage

import { virtualList, virtualMasonry, masonryGrid } from "mates-virtual";
import { html } from "mates";

// Virtual list — wrap a fixed-height overflow:auto container
html`
  <div style="height:600px;overflow:auto">
    ${virtualList(items, (item) => item.id, (item) => html`
      <div class="row">${item.name}</div>
    `)}
  </div>
`

// CSS masonry grid
html`
  ${masonryGrid(photos, (p) => p.id, (p) => html`
    <img src="${p.src}" loading="lazy" />
  `, { columns: 3, gap: "8px" })}
`

Bundle size

~25 KB minified + gzipped (virtualizer engine + directives).

License

MIT