useScreen

Read a reactive snapshot of the browser screen properties.

HooksEnvironment@gaudi/design-system/hooks/environment/use-screenView in Storybook Source

Measures after mount and refreshes on window resize and screen-orientation changes. Returns a plain snapshot instead of the browser's mutable Screen object.

Usage

import { useScreen } from '@gaudi/design-system/hooks';
const screen = useScreen();

Examples

Playground

Storybook

API

1 return value

Accessibility

Use viewport or container size for responsive layout; display size does not describe the space available to your component.

Notes

Dimensions are screen CSS pixels and may be reduced or rounded by browser privacy settings. Orientation and angle are null when unavailable.

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.useMediaQueryTrack a CSS media query, SSR-safe.useOnlineStatusWhether the browser reports a network connection.