useMediaQuery()

1import { useEffect, useState } from 'react'
2
3function useMediaQuery(query: string): boolean {
4  const getMatches = (query: string): boolean => {
5    // Prevents SSR issues
6    if (typeof window !== 'undefined') {
7      return window.matchMedia(query).matches
8    }
9    return false
10  }
11
12  const [matches, setMatches] = useState<boolean>(getMatches(query))
13
14  function handleChange() {
15    setMatches(getMatches(query))
16  }
17
18  useEffect(() => {
19    const matchMedia = window.matchMedia(query)
20
21    // Triggered at the first client-side load and if query changes
22    handleChange()
23
24    // Listen matchMedia
25    matchMedia.addEventListener('change', handleChange)
26
27    return () => {
28      matchMedia.removeEventListener('change', handleChange)
29    }
30    // eslint-disable-next-line react-hooks/exhaustive-deps
31  }, [query])
32
33  return matches
34}
35
36export default useMediaQuery

1import React from 'react'
2
3import { useMediaQuery } from 'usehooks-ts'
4
5export default function Component() {
6  const matches = useMediaQuery('(min-width: 768px)')
7
8  return (
9    <div>
10      {`The view port is ${matches ? 'at least' : 'less than'} 768 pixels wide`}
11    </div>
12  )
13}