useWindowSize#

Reactive window inner size as one { width, height } view, on the cross-platform WindowSizeState contract. Browser composable — import from @sigx/use-web.

import { component, render } from 'sigx';
import { useWindowSize } from '@sigx/use-web';

const Size = component(() => {
    const size = useWindowSize();
    return () => <p class="font-mono">{size.width} × {size.height}</p>;
});

render(<Size />, "#app");

Usage#

The return is a ReactiveView<WindowSizeState> — read width/height by direct property access, each tracked independently:

import { computed } from 'sigx';
import { useWindowSize } from '@sigx/use-web';

const size = useWindowSize();
const cols = computed(() => (size.width < 768 ? 1 : 3)); // re-runs on width only

To pull a field out without snapshotting it, use core's toSignals() rather than a plain destructure.

Signature#

function useWindowSize(options?: UseWindowSizeOptions): ReactiveView<WindowSizeState>;

WindowSizeState is a cross-platform contract — Lynx implements the same { width, height } shape from its viewport APIs, so layout code ports across targets unchanged. (useElementSize returns the same shape for a single element.)

Options#

SSR#

On the server (no window) the view stays at initialWidth/initialHeight, then reads the real size on mount.

The initial values default to Infinity, not 0, on purpose: a desktop-first computed like size.width < 768 ? 1 : 3 then resolves to the desktop branch on the server. A wrong desktop layout fails visibly during review; a 0-seeded default would silently render the mobile branch to every server response instead. Set initialWidth/initialHeight if you have a better guess for first paint.

See also#

• useBreakpoints — named breakpoint queries instead of raw pixels.
• useMediaQuery — the underlying matchMedia primitive.
• useScroll — reactive scroll position for the same window.
• Conventions → Cross-platform contracts — the WindowSizeState shape a platform pack fulfils.