Astryx Design System

useMediaQuery@astryxdesign/core v0.0.15 · useMediaQuery

Usage

SSR-safe media query hook that subscribes to window.matchMedia changes. Returns whether the given media query matches. Always returns false on first render for SSR compatibility.

ts
import {useMediaQuery} from '@astryxdesign/core/hooks'

Best practices

Guidance	Practices
Do	Use for responsive layout switching based on viewport width, color scheme, or motion preferences.
Do	Prefer XDS responsive tokens and component props over manual breakpoint logic when possible.
Don't	Use for server-rendered content that must match on first paint; the hook always returns false initially.

Parameters

Param	Type	Description
queryrequired	string	CSS media query string to evaluate.

Returns

Field	Type	Description
matches	boolean	Whether the media query currently matches. Always false on first render (SSR-safe).