Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

useWindowSize

Track layout viewport width and height in CSS pixels.

HooksEnvironment@gaudi/design-system/hooks/environment/use-window-sizeView in StorybookSource

Reads the window after mount and updates on resize. Unchanged dimensions keep the same result object. The server and first client render use the supplied initial dimensions.

Usage

import { useWindowSize } from '@gaudi/design-system/hooks';
const { width, height } = useWindowSize();

Examples

Playground

Storybook

API

2 options
1 return value

Accessibility

Prefer CSS responsive layout or useMediaQuery for breakpoints. Avoid hiding essential content based only on viewport size.

useMediaQueryTrack a CSS media query, SSR-safe.useDocumentTitleSet a document title and restore the previous owner on cleanup.useIsClientFalse on the server and during hydration, true on the client.useIsMobileTrue below the 768px phone breakpoint.useIsMountedA stable getter for whether this hook is currently mounted.useOnlineStatusWhether the browser reports a network connection.