fn
useMediaQuery
v0.0.14testeddemoReactive 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