You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
import{useEffect,useState}from'react';constuseMediaQuery=(mediaQuery: string): boolean=>{const[isVerified,setIsVerified]=useState(false);useEffect(()=>{constmediaQueryList=window.matchMedia(mediaQuery);constdocumentChangeHandler=(): void=>setIsVerified(!!mediaQueryList.matches);try{mediaQueryList.addEventListener('change',documentChangeHandler);}catch(e){// Safari isn't supporting mediaQueryList.addEventListenermediaQueryList.addListener(documentChangeHandler);}documentChangeHandler();return(): void=>{try{mediaQueryList.removeEventListener('change',documentChangeHandler);}catch(e){// Safari isn't supporting mediaQueryList.removeEventListenermediaQueryList.removeListener(documentChangeHandler);}};// eslint-disable-next-line react-hooks/exhaustive-deps},[]);// Empty array ensures that effect is only run on mountreturnisVerified;};export{useMediaQuery};
The text was updated successfully, but these errors were encountered:
Describe the bug
If you use in a Next.js Application
useMedaQuery
it results in the same issue described here:vercel/next.js#17443
To Reproduce
Steps to reproduce the behavior:
useMedaQuery
in one ComponentExpected behavior
No error is thrown, as it further breaks reloading CSS in Next.js Dev Application and probably more.
Additional context
Following this amazing description: https://dev.to/adrien/creating-a-custom-react-hook-to-get-the-window-s-dimensions-in-next-js-135k it works for me like this right now:
The text was updated successfully, but these errors were encountered: