useElementSize

v0.0.14testeddemo

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

Property	Type	Default	Description
`width`	`ShallowRef<number>`	—	—
`height`	`ShallowRef<number>`	—	—
`stop`	`() => void`	—	—