useMediaQuery @astryx-svelte/core v0.3.0 · 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). |