Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProThe browser window's inner width and height, updated on resize and orientation change, safe for server rendering.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it when JavaScript needs the viewport size: sizing a canvas or a virtual list, choosing a layout in code, or confetti that fills the screen.
Do not use it for responsive styling (use CSS and useMediaQuery) or for an element's size (use useResizeObserver).
import { useWindowSize } from "@/hooks/use-window-size"const { width, height } = useWindowSize()useWindowSize(): { width: number | undefined; height: number | undefined }
width and height are undefined on the server and during hydration, then the real size. The same object is returned until the size changes, so it is safe in dependency lists. It uses useSyncExternalStore, so there is no tearing under concurrent rendering.
A hook has no markup. Zooming the page changes the inner width, so layouts driven by this hook must keep working at 200% zoom and 320 CSS pixels wide (WCAG 1.4.10).
The hook ships with renderHook tests (use-window-size.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.