useWindowSize

Tracks the browser window dimensions as reactive Observable<number> values for width and height. Supports inner, outer, and visual viewport modes, and updates on resize and orientation change. SSR-safe: returns initialWidth/initialHeight (default 0) when window is not available.

Demo

width: 0pxheight: 0px

Resize the browser window to see the values update.

Usage

import { useWindowSize } from "@usels/core";

function Component() {
  const size$ = useWindowSize();

  return (
    <p>
      {size$.width.get()} × {size$.height.get()}
    </p>
  );
}

Excluding scrollbar width

const size$ = useWindowSize({ includeScrollbar: false });

Outer window size

const size$ = useWindowSize({ type: "outer" });

Visual viewport (pinch-zoom aware)

const size$ = useWindowSize({ type: "visual" });

Custom initial size for SSR

const size$ = useWindowSize({ initialWidth: 1280, initialHeight: 800 });

Type Declarations

export interface UseWindowSizeOptions {
    initialWidth?: number;
    initialHeight?: number;
    listenOrientation?: boolean;
    includeScrollbar?: boolean;
    type?: "inner" | "outer" | "visual";
}
export type UseWindowSizeReturn = Observable<{
    width: number;
    height: number;
}>;
export declare function useWindowSize(options?: DeepMaybeObservable<UseWindowSizeOptions>): UseWindowSizeReturn;

Source

View on GitHub

Contributors

• tigerwest

Changelog

• a7392ab 2026-03-06 - feat(core,browser): add sync strategy hooks (tigerwest)