forked from TanStack/query
/
useMediaQuery.ts
34 lines (28 loc) 路 874 Bytes
/
useMediaQuery.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import * as React from 'react'
export default function useMediaQuery(query: string): boolean | undefined {
// Keep track of the preference in state, start with the current match
const [isMatch, setIsMatch] = React.useState(() => {
if (typeof window !== 'undefined') {
return window.matchMedia(query).matches
}
return
})
// Watch for changes
React.useEffect(() => {
if (typeof window !== 'undefined') {
// Create a matcher
const matcher = window.matchMedia(query)
// Create our handler
const onChange = ({ matches }: { matches: boolean }) =>
setIsMatch(matches)
// Listen for changes
matcher.addListener(onChange)
return () => {
// Stop listening for changes
matcher.removeListener(onChange)
}
}
return
}, [isMatch, query, setIsMatch])
return isMatch
}