useMediaQuery API

A composable for reactive CSS media query matching with automatic cleanup.

Explore these related pages for additional context and usage patterns.

(query: MaybeRefOrGetter<string>) => MediaQueryContext

Reactive media query matching.

() => MediaQueryContext

Check if the user prefers dark color scheme.

() => MediaQueryContext

Check if the user prefers reduced motion.

() => MediaQueryContext

Check if the user prefers more contrast.

Readonly<ShallowRef<boolean>>

Whether the media query currently matches

Readonly<Ref<string, string>>

The current media query string

Readonly<ShallowRef<MediaQueryList | null>>

The underlying MediaQueryList (null on server)

() => void

Stop listening and clean up