useMediaQuery.ts 457 B

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