React-Hooks-Article: useMedia hook

UseMediaExample.tsx

import React, { useEffect, useState } from "react"

const useMedia = (query: string): boolean => {
  const [matches, setMatches] = useState(false)

  useEffect(() => {
    const queryObject = window.matchMedia(query)
    setMatches(queryObject.matches)

    const listener = (e: MediaQueryListEvent) => {
      setMatches(e.matches)
    }

    queryObject.addEventListener("change", listener)

    return () => {
      queryObject.removeEventListener("change", listener)
    }
  }, [query])

  return matches
}

export const UseMediaExample = () => {
  const matches = useMedia("(min-width: 600px)")

  return (
    <>
      <p>Width is above 600 px: {matches ? "true" : "false"}</p>
    </>
  )
}