fn
useMediaQuery
v0.0.15testeddemoReactive `window.matchMedia`. SSR-safe, reactive to the query, and with optional SSR width resolution for `min-width` / `max-width` queries.
Examples
ts
const isLarge = useMediaQuery('(min-width: 1024px)');ts
// Resolve width queries during SSR to avoid hydration flicker
const isWide = useMediaQuery('(min-width: 1024px)', { ssrWidth: 1280 });Demo
Loading demo…
Signature
ts
export function useMediaQuery(
query: MaybeRefOrGetter<string>,
options: UseMediaQueryOptions ={ ... }Parameters
| Parameter | Type | Description |
|---|---|---|
query | MaybeRefOrGetter<string> | The media query (can be reactive) |
options? | UseMediaQueryOptions | Options (custom `window`, `ssrWidth`) |
Returns
ComputedRef<boolean>Readonly ref of whether the query currently matches