npm i @react-hook/media-query

React hooks that update when media queries change between matched and unmatched states.

Quick Start

``jsx harmony
import {useMediaQuery, useMediaQueries} from '@react-hook/media-query'

// Using a single media query
const Component = () => {
const matches = useMediaQuery('only screen and (min-width: 400px)')
return Matches? ${matches ? 'Matched!' : 'Nope :(')}
}

// Using multiple media queries
const Component = () => {
const {matches, matchesAny, matchesAll} = useMediaQueries({
screen: 'screen',
width: '(min-width: 400px)'
})

return (


A hook that returns true if the media query matched and false if not. This hook
will always return false when rendering on the server.

| Argument | Type | Required? | Description |
| -------- | -------- | --------- | ------------------------------------------------------------------------------------ |
| query | string | Yes | The media query you want to match against e.g. "only screen and (min-width: 12em)" |

#### Returns boolean

Returns true if the media query matched. This is always false when rendering on the server.

$3

A hook that returns a MediaQueryMatches object which will
tell you if specific media queries matched, all media queries matched, or
any media queries matched. Matches in this hook will always return false when
rendering on the server.

| Argument | Type | Required? | Description |
| -------- | ----------------------------- | --------- | ------------------------------------------------------------------------------------------------- |
| queryMap | {[Name in keyof T]: string} | Yes | The media queries you want to match against e.g. {screen: "screen", width: "(min-width: 12em)"} |

#### Returns MediaQueryMatches

$3

`typescript
export interface MediaQueryMatches {
/**
* Returns a map of query key/didMatch pairs
*/
matches: Matches
/**
* true if any of the media queries matched
*/
matchesAny: boolean
/**
* true if all of the media queries matched
*/
matchesAll: boolean
}
``

LICENSE

MIT