Function useMatchMedia

src/useMediaQuery.ts:72–92

(query: string, device?: MediaQueryMatchers)

}

const useMatchMedia = (query: string, device?: MediaQueryMatchers) => {
  const getMatchMedia = () => matchMedia(query, device || {}, !!device)
  const [mq, setMq] = useState(getMatchMedia)
  const isUpdate = useIsUpdate()

  useEffect(() => {
    if (isUpdate) {
      // skip on mounting, it has already been set
      const newMq = getMatchMedia()
      setMq(newMq)

      return () => {
        if (newMq) {
          newMq.dispose()
        }
      }
    }
  }, [query, device])

  return mq
}

const useMatches = (mediaQuery: MediaQueryList): boolean => {
  const [matches, setMatches] = useState<boolean>(mediaQuery.matches)