useMediaQuery

Track a CSS media query, SSR-safe.

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

Returns whether a media query matches and follows changes. Returns the fallback during server rendering and hydration so markup stays stable; client-only renders read the real value at once. Merges two earlier implementations.

Usage

import { useMediaQuery } from '@gaudi/design-system/hooks';
const wide = useMediaQuery('(min-width: 1024px)', true);

Examples

Live queries

Storybook

Render a different tree

Storybook

API

2 options

1 return value

Accessibility

Prefer CSS for purely visual changes. Use the hook when the tree really differs (one pane instead of two), and keep the same content and controls reachable in both layouts.

Notes

matchesMediaQuery(query) and subscribeMediaQuery(query, notify) are exported for non-React code.

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.usePageVisibilityWhether the tab is visible, to pause work in the background.