useElementSize

v0.0.15testeddemo

Reactive size of an element, backed by `ResizeObserver`. Measures synchronously on mount, handles SVG elements via `getBoundingClientRect`, and sums multiple box fragments (e.g. multi-column layouts).

Source Tests

Examples

const el = useTemplateRef('el');
const { width, height } = useElementSize(el);

const { width, height, stop } = useElementSize(el, { width: 100, height: 100 }, { box: 'border-box' });

Demo

Loading demo…

Signature

export function useElementSize(
  target: MaybeComputedElementRef,
  initialSize: ElementSize ={ ... }

Parameters

Parameter	Type	Default	Description
`target`	`MaybeComputedElementRef`	—	Element to measure (ref, getter, or component instance)
`initialSize`?	`ElementSize`	`{ width: 0, height: 0 }`	Initial size, restored when the element detaches
`options`?	`UseElementSizeOptions`	`{}`	Options forwarded to `ResizeObserver` (`box`, `window`)

Returns

UseElementSizeReturnReactive `width`, `height`, and a `stop` handle