Elements

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

Window Size

Resize the browser window to see the values update.

width

0px

height

0px

import { 
const useWindowSize: (options?: DeepMaybeObservable<UseWindowSizeOptions>) => UseWindowSizeReturn
useWindowSize } from "@usels/web";

function 
function Component(): JSX.Element
Component() {
  const 
const size$: any
size$ = 
function useWindowSize(options?: DeepMaybeObservable<UseWindowSizeOptions>): UseWindowSizeReturn
Framework-agnostic reactive window size tracker.
Tracks the browser window dimensions and updates on resize and orientation
change. Supports inner, outer, and visual viewport modes.
Must be called inside a useScope factory.
useWindowSize();

  return (
    <
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>
      {
const size$: any
size$.
any
width.
any
get()} × {
const size$: any
size$.
any
height.
any
get()}
    </
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>
  );
}

import { createWindowSize } from "@usels/web";

function Component() {
  "use scope";
  const size$ = createWindowSize();

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

Excluding scrollbar width

Hook
Scope

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

function Component() {
  "use scope";
  const size$ = createWindowSize({ includeScrollbar: false });
}

Outer window size

Hook
Scope

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

function Component() {
  "use scope";
  const size$ = createWindowSize({ type: "outer" });
}

Visual viewport (pinch-zoom aware)

Hook
Scope

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

function Component() {
  "use scope";
  const size$ = createWindowSize({ type: "visual" });
}

Custom initial size for SSR

Hook
Scope

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

function Component() {
  "use scope";
  const size$ = createWindowSize({ initialWidth: 1280, initialHeight: 800 });
}

Type

Parameters

Parameter	Type	Description
`options`	`UseWindowSizeOptions` (optional)	-

UseWindowSizeOptions

Option	Type	Default	Description
`initialWidth`	`number`	`-`	-
`initialHeight`	`number`	`-`	-
`listenOrientation`	`boolean`	`-`	-
`includeScrollbar`	`boolean`	`-`	-
`type`	`"inner" \| "outer" \| "visual"`	`-`	-
`window`	`WindowSource`	`-`	-

Returns

UseWindowSizeReturn

Name	Type	Description
`peek`	`{ (): { width: number; height: number; }; (): { width: number; height: number; } & NullablePropsIf<Pick<{ width: number; height: number; }, never>, false>; }`	-
`get`	`(trackingType?: TrackingType \| GetOptions) => { width: number; height: number; }`	-
`onChange`	`(cb: ListenerFn<{ width: number; height: number; } & NullablePropsIf<Pick<{ width: number; height: number; }, never>, false>>, options?: { trackingType?: TrackingType; initial?: boolean \| undefined; immediate?: boolean \| undefined; noArgs?: boolean \| undefined; } \| undefined) => () => void`	-
`set`	`{ (value: (prev: { width: number; height: number; }) => { width: number; height: number; }): void; (value: Observable<{ width: number; height: number; }>): void; (value: ImmutableObservableBase<{ width: number; height: number; } & NullablePropsIf<...>> \| ((key: string) => any) \| Promise<...> \| ValueOrFunctionKeys<.....`	-
`delete`	`() => void`	-
`assign`	`(value: Partial<{ width: number; height: number; } & NullablePropsIf<Pick<{ width: number; height: number; }, never>, false>>) => Observable<{ width: number; height: number; } & NullablePropsIf<...>>`	-
`width`	`ObservablePrimitive<number>`	-
`height`	`ObservablePrimitive<number>`	-

Source

View on GitHub