Guide
Reference
Roadmap
Guide
Reference
Roadmap

useMediaQuery

Tags:
Browser
LowLevel

A React Hook that tracks the state of CSS media query/queries.

Demo

Try to resize the window to see the effect.

Source
isPhoneView:
false
isPadView:
false
isDesktopView:
false
isColorfulDevice:
false
isPortraitPrint:
undefined
isNotPrint:
undefined

Usage

See API for more details.

Source

Click links below to view source on GitHub.

🪝 Hook🎨 Demo📄 Document

API

const query = useMediaQuery(queryString, options) const [...queries] = useMediaQuery([...queryStrings], options)

QueryString

A media query string, or an array of media query strings.

Options

AddEventListenerOptions is options of useEventListener, see useEventListener#options for more details.

export type UseMediaQueryOptions = AddEventListenerOptions & {}

Returns

If queryString is a string, returns a boolean value that indicates whether the media query matches.

If queryString is an array, returns an array of boolean values that indicate whether the media queries match.

export type UseMediaQueryReturns<T, R> = R extends T[] ? boolean[] : boolean