@fictjs/rect

Rectangle observation utility for Fict, modeled after @radix-ui/rect. Efficiently observes an element's bounding rectangle and notifies you when it changes, using a single shared requestAnimationFrame loop.

Part of ui-primitives, a port of Radix Primitives to Fict.

Low-level utility. For a reactive accessor in components, prefer @fictjs/use-rect.

Installation

pnpm add @fictjs/rect

Usage

import { observeElementRect } from '@fictjs/rect'

const unobserve = observeElementRect(element, (rect) => {
  console.log(rect.width, rect.height)
})

// later
unobserve()

API

• observeElementRect(element, callback) — invokes callback with the element's DOMRect whenever it changes; returns an unobserve function. Observations share one rAF loop that stops when the last observer is removed.

Exports

• Values: observeElementRect.
• Types: Measurable.

Documentation

The API mirrors @radix-ui/rect. See the ui-primitives overview and the architecture guide.

License

MIT © Fict contributors.