import { isFunction } from "../../shared" ; import { useEffect , useState } from "react" ; export const supportsMatchMedia = isFunction ( window ?. matchMedia ) ; export function useMediaQuery ( query ) { const [ matches , setMatches ] = useState ( ( ) => supportsMatchMedia ? window . matchMedia ( query ) . matches : false ) ; useEffect ( ( ) => { if ( ! supportsMatchMedia ) { return ; } const mediaQueryList = window . matchMedia ( query ) ; const onChange = ( event ) => { setMatches ( event . matches ) ; } ; mediaQueryList . addEventListener ( "change" , onChange ) ; return ( ) => { mediaQueryList . removeEventListener ( "change" , onChange ) ; } ; } , [ query ] ) ; return matches ; }