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
Best practices
| Guidance | Practices |
|---|---|
| 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
| 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). |
Examples
Common configurations, variations, and states.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.
Chooses a bottom sheet for compact touch surfaces and an anchored popover otherwise. The media query is product policy, while DropdownMenu owns both presentations.
Use with shadcn
Already using the shadcn registry workflow? Install the real Astryx package and a local public re-export. Component implementation source stays in Astryx. How compatibility works.
This install URL expires with the draft preview.bash