import { useEffect , useState } from 'react' ; /**
 * Programmatically matches given media query
 */ export default function useMediaQuery ( query ) { const [ isMatching , setMatching ] = useState ( false ) ; const handleChange = < M extends MediaQueryListEvent | MediaQueryList > ( match ) => { setMatching ( match . matches ) ; } ; useEffect ( ( ) => { if ( window ) { const match = window . matchMedia ( query ) ; handleChange ( match ) ; see if ( match . addEventListener ) { match . addEventListener ( 'change' , handleChange ) ; } else { match . addListener ( handleChange ) ; } return ( ) => { if ( match . removeEventListener ) { match . removeEventListener ( 'change' , handleChange ) ; } else { match . removeListener ( handleChange ) ; } } ; } } , [ ] ) ; return isMatching ; }