Miss any of our Open RFC calls?Watch the recordings here! »

@react-hook/media-query

1.1.1 • Public • Published

useMediaQuery()

Bundlephobia Types Build status NPM Version MIT License

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

Install

npm i @react-hook/media-query

DownloadsWeekly Downloads

507

Version

1.1.1

License

MIT

Unpacked Size

80.3 kB

Total Files

30

Last publish

Collaborators

  • avatar