fn
useElementBounding
v0.0.15testeddemoReactive bounding box of an element (`getBoundingClientRect`), kept in sync via `ResizeObserver`, `MutationObserver`, and window scroll/resize. Supports deferring reads to the next animation frame to avoid layout thrash.
Examples
ts
const { width, height, top, left } = useElementBounding(el);ts
// Batch rapid scroll/resize reads into one measurement per frame
const bounds = useElementBounding(el, { updateTiming: 'next-frame' });Demo
Loading demo…
Signature
ts
export function useElementBounding(
target: MaybeComputedElementRef,
options: UseElementBoundingOptions ={ ... }Parameters
| Parameter | Type | Description |
|---|---|---|
target | MaybeComputedElementRef | Element to measure |
options? | UseElementBoundingOptions | Options |
Returns
UseElementBoundingReturnReactive bounds and a manual `update`