window-size

Track the window size reactively.


Package	`@vizejs/composable/window-size`
Own the source	`vize lib pull composable:window-size`
Runtime exports	`useWindowSize`
Gzip budget	1536 B

Usage

import { useWindowSize } from "@vizejs/composable/window-size";

Runtime contract

Utility	Category	Stability	SSR	Hydration	Cleanup	Targets	Host globals	Uses
`useWindowSize`	dom	experimental	deterministic-fallback	stable	reactive-scope	web, desktop	`window`	`tryOnScopeDispose`

API

`useWindowSize`

Track the window size reactively. Server renders expose initialWidth/initialHeight (default 0), so the first client render matches; the real size is applied as soon as a window resolves (after mounting when called inside a component). Resize (and orientation) listeners are passive and removed with the owning reactive scope.

function useWindowSize(options: UseWindowSizeOptions = {}): WindowSizeControls

Types

`WindowSizeHost`

Window-like capability observed by useWindowSize.

Member	Type	Description
`innerWidth`	`number`	Viewport width including the vertical scrollbar.
`innerHeight`	`number`	Viewport height including the horizontal scrollbar.
`outerWidth`	`number`	Outer browser window width.
`outerHeight`	`number`	Outer browser window height.
`document`	`{ readonly documentElement: { readonly clientWidth: number; readonly clientHeight: number }; }`	Document whose root element reports the scrollbar-free viewport.

`UseWindowSizeOptions`

Options for useWindowSize.

Member	Type	Description
`initialWidth`?	`number`	Width exposed during server rendering and before hydration.
`initialHeight`?	`number`	Height exposed during server rendering and before hydration.
`includeScrollbar`?	`boolean`	Include scrollbars in the inner dimensions. When `false`, the root element's `clientWidth`/`clientHeight` are reported instead.
`type`?	`WindowSizeKind`	Report inner (viewport) or outer (browser window) dimensions.
`listenOrientation`?	`boolean`	Also re-measure on `orientationchange` for engines that resize late.
`host`?	`MaybeRefOrGetter<WindowSizeHost \| null \| undefined>`	Reactive window capability for alternate runtimes and tests.

`WindowSizeControls`

Reactive size returned by useWindowSize.

Member	Type	Description
`width`	`Readonly<Ref<number>>`	Current width in CSS pixels.
`height`	`Readonly<Ref<number>>`	Current height in CSS pixels.
`isSupported`	`Readonly<Ref<boolean>>`	Whether a window capability is attached. `false` during server rendering.