useMediaQuery.ts19 lines · main

1	import { useEffect, useState } from 'react'
2
3	export function useMediaQuery(query: string) {
4	const [value, setValue] = useState(false)
5
6	useEffect(() => {
7	function onChange(event: MediaQueryListEvent) {
8	setValue(event.matches)
9	}
10
11	const result = matchMedia(query)
12	result.addEventListener('change', onChange)
13	setValue(result.matches)
14
15	return () => result.removeEventListener('change', onChange)
16	}, [query])
17
18	return value
19	}