media-query

Evaluate a reactive media query without requiring browser globals.

Usage

import { useMediaQuery, useReducedMotion } from "@vizejs/composable/media-query";

Runtime contract

API

useMediaQuery

Evaluate a reactive media query without requiring browser globals. During server rendering (or whenever no capability host resolves) the ref holds the configured server value and no subscription is created. Inside a component the first match is read after mounting, so hydration renders the server value first and never mismatches. The change subscription follows the reactive query and host: each re-evaluation removes the previous listener, and the final listener is removed when the owning reactive scope stops. Call inside an active scope so the subscription is released. A host whose matcher throws propagates the error to the active effect run; the browser default never throws.

function useMediaQuery( query: MaybeRefOrGetter<string>, options: UseMediaQueryOptions = {}, ): Readonly<Ref<boolean>>

useReducedMotion

Return the reactive user motion preference. Shares useMediaQuery semantics: during server rendering the preference is "no-preference" unless ssrValue is true, and the underlying subscription is removed when the owning reactive scope stops.

function useReducedMotion( options: UseMediaQueryOptions = {}, ): ComputedRef<MotionPreference>

Types

MediaQueryHost

Capability required to evaluate media queries.

UseMediaQueryOptions

Options for useMediaQuery.