useMedia hook

useMedia.js

const useMedia = (query, defaultState) => {
  const [state, setState] = useState(defaultState)

  useEffect(
    () => {
      let mounted = true
      const mql = window.matchMedia(query)
      const onChange = () => {
        if (!mounted) return
        setState(!!mql.matches)
      }

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

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

  return state
}

export const useMediaMin = (bp, defaultState) =>
  useMedia(`(min-width: ${breakpoints[bp]}px)`, defaultState)

export const useMediaMax = (bp, defaultState) =>
  useMedia(`(max-width: ${breakpoints[bp] - 1}px)`, defaultState)