@fictjs/use-rect

Element rect observation hook for Fict, modeled after @radix-ui/react-use-rect. Returns a reactive accessor for an element's bounding rectangle, updating as it changes.

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

Built on @fictjs/rect.

Installation

pnpm add @fictjs/use-rect fict

Usage

/** @jsxImportSource fict */
import { useRect } from '@fictjs/use-rect'

function Measured() {
  let el: HTMLDivElement | null = null
  const rect = useRect(() => el) // accessor: () => DOMRect | undefined
  return <div ref={(node) => (el = node)}>{rect()?.width}px</div>
}

API

• useRect(target) — target may be an accessor (() => Element | null) or a { current } ref object. Returns an accessor (() => DOMRect | undefined) that tracks the element's rect.

Exports

• Values: useRect.
• Types: RectTarget.

Documentation

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

License

MIT © Fict contributors.