useMediaQuery • Dan Stroot

Code

  
  
    
  
  import { useEffect, useState } from 'react'

export const useMediaQuery = (query) => {
  const [state, setState] = useState(false)

  useEffect(() => {
    let mounted = true

    // Returns a MediaQueryList object
    const mql = window.matchMedia(query)
    const onChange = () => {
      if (!mounted) return
      setState(!!mql.matches)
    }

    mql.addListener(onChange)
    setState(mql.matches)

    // clean up
    return () => {
      mounted = false
      mql.removeListener(onChange)
    }
  }, [query])

  return state
}

Context

If you have a special case, when you need to get media query result inside you react app (for example, you want to show different components on mobile and desktop) this is the way to do so.

Usage

  
  
    
  
  const EffecfulComponent = () => {
  const result = useMediaQuery(`screen and (max-width: 400px)`)
  return <span>{result.toString()}</span>
}

const biggerThan400 = useMediaQuery(`(min-width: 400px)`)

return <div>{biggerThan400 && <button>SomeButton</button>}</div>