React hooks that update when media queries change between matched and unmatched states.
npm install @react-hook/media-querynpm i @react-hook/media-query
React hooks that update when media queries change between matched and unmatched states.
``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 (
API
$3
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
booleanReturns
true if the media query matched. This is always false when rendering on the server.$3
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)"} |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
}
``MIT