useElementSize#

An element's content size as one reactive { width, height } object. Browser composable — import from @sigx/use-web.

It builds on useResizeObserver, and returns a ReactiveView — read size.width / size.height by property access, each tracked per key.

import { signal, computed } from 'sigx';
import { useElementSize } from '@sigx/use-web';

const el = signal<HTMLElement | null>(null);
// <div ref={el}> …

const size = useElementSize(el);
const isNarrow = computed(() => size.width < 480);

Pass any element target. An initialSize (default { width: 0, height: 0 }) seeds the value before the first measurement, and options pass straight through to the underlying ResizeObserver.

To pull fields out without snapshotting them, use core's toSignals():

import { toSignals } from 'sigx';
const { width, height } = toSignals(useElementSize(el)); // each a live signal

Signature#

function useElementSize(
    target: MaybeSignalElement,
    initialSize?: WindowSizeState,
    options?: UseResizeObserverOptions,
): ReactiveView<WindowSizeState>;

interface WindowSizeState { width: number; height: number; }

SSR#

Stays at initialSize (no observer runs on the server).

See also#

• useResizeObserver — the observer this wraps; use it when you need the raw entries.
• useWindowSize — the same { width, height } shape for the viewport.
• useElementVisibility — the intersection counterpart.