#useMediaQuery

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

#Demo

Try to resize the window to see the effect.

#Usage

See API for more details.

#Source

#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