useMediaQuery@astryxdesign/core v0.5.2 · 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

GuidancePractices
Do

Use for responsive layout switching based on viewport width, color scheme, or motion preferences.

Do

Prefer Astryx 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

ParamTypeDescription
queryrequired
string

CSS media query string to evaluate.

Returns

FieldTypeDescription
matchesboolean

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

Examples

Common configurations, variations, and states.
Dialog — Adaptive presentation
Open in Playground

Opt-in recipe for an AdaptiveDialog wrapper: Dialog remains the default everywhere, while touchPresentation="bottom-sheet" switches only at lg and below when pointer is coarse and hover is unavailable. Includes a deterministic presentation override for tests/unusual environments and notes that BottomSheet purpose controls swipe and scrim dismissal. Usage examples: touchPresentation="dialog" keeps Dialog, "fullscreen" chooses fullscreen Dialog, and "bottom-sheet" chooses BottomSheet only for the touch-oriented range. Keep presentation as the deterministic override. Do not use this by default for AlertDialog or destructive confirmations.

DropdownMenu — Adaptive presentation
Open in Playground

Chooses a bottom sheet for compact touch surfaces and an anchored popover otherwise. The media query is product policy, while DropdownMenu owns both presentations.