useResizeObserver#

Observe element size changes with a ResizeObserver. Browser composable — import from @sigx/use-web.

The observer follows reactive targets — re-observing when the element changes — and disconnects with the owning scope. Point it at a single element target or an array of them.

import { signal } from 'sigx';
import { useResizeObserver } from '@sigx/use-web';

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

useResizeObserver(box, ([entry]) => {
    console.log(entry.contentRect.width, entry.contentRect.height);
});

The callback is the native ResizeObserverCallback — you receive ResizeObserverEntry[], so contentRect, borderBoxSize, and friends are all available. Options extend the native ResizeObserverOptions (e.g. { box: 'border-box' }) alongside the ConfigurableWindow override.

Reaching for width/height as reactive values? Use useElementSize, which wraps this into a { width, height } reactive view.

Signature#

function useResizeObserver(
    target: MaybeSignalElement | MaybeSignalElement[],
    callback: ResizeObserverCallback,
    options?: UseResizeObserverOptions,
): UseResizeObserverReturn;

interface UseResizeObserverOptions extends ConfigurableWindow, ResizeObserverOptions {}

Returns#

interface UseResizeObserverReturn {
    isSupported: ReadSignal<boolean>;
    stop: Stop;
}

SSR#

Inert: isSupported is false and the callback never fires.

See also#

• useElementSize — reactive { width, height } built on this.
• useIntersectionObserver — the visibility counterpart.
• Conventions → Element targets (web) — the accepted target shapes.