import { useEffect , useState } from 'react' ; import { useMount } from '../useMount' ; param { string } query returns { boolean } see https export function useMediaQuery ( query ) { const [ matches , setMatches ] = useState ( false ) ; useMount ( ( ) => { setMatches ( window . matchMedia ( query ) . matches ) ; } ) ; useEffect ( ( ) => { const mediaQuery = window . matchMedia ( query ) ; const handler = ( event ) => { setMatches ( event . matches ) ; } ; mediaQuery . addEventListener ( 'change' , handler ) ; return ( ) => mediaQuery . removeEventListener ( 'change' , handler ) ; } , [ query ] ) ; return matches ; }