@react-hook/media-query
    TypeScript icon, indicating that this package has built-in type declarations

    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

    6,569

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    80.3 kB

    Total Files

    30

    Last publish

    Collaborators

    • jaredlunde