fn
useElementBounding
v0.0.14testeddemoReactive 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| Property | Type | Description |
|---|---|---|
height | Ref<number> | — |
width | Ref<number> | — |
top | Ref<number> | — |
right | Ref<number> | — |
bottom | Ref<number> | — |
left | Ref<number> | — |
x | Ref<number> | — |
y | Ref<number> | — |
update | () => void | Manually recalculate the bounding box, honouring updateTiming. |