@react-hook/media-query

useMediaQuery()

npm i @react-hook/media-query

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

Quick Start

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 (
    <div>
      Screen matched? {matches.screen ? 'Yes' : 'No'}
      Width matched? {matches.width ? 'Yes' : 'No'}
      All matched? {matchesAll ? 'Yes' : 'No'}
      Any matched? {matchesAny ? 'Yes' : 'No'}
    </div>
  )
}

API

useMediaQuery(query)

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.

useMediaQueries(queryMap)

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

MediaQueryMatches

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

LICENSE

MIT