useMediaQuery @astryx-svelte/core v0.5.2 · hooks
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
| Parameter | Type | Default | Description |
|---|---|---|---|
query Required | () => string | — | CSS media query string to evaluate. |
Returns
| Field | Type | Default | Description |
|---|---|---|---|
matches | boolean | — | Whether the media query currently matches. Always false on first render (SSR-safe). |
Examples
Common configurations, variations, and states.Dialog — Adaptive presentation
Live preview pending — this block's Svelte rewrite has not landed yet.
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.