fix(use-media-query): hook doesn't observe viewport changes (#1853)

mg901 · Apr 12, 2024 · 242e849 · 242e849
1 parent 8b6ab85
commit 242e849
Showing 1 changed file with 6 additions and 4 deletions.
diff --git a/use-media-query/index.js b/use-media-query/index.js
@@ -15,7 +15,7 @@ exports.useMediaQuery = useMediaQuery;
  * @returns {boolean} - `true` if the media query matches, otherwise `false`.
  */
 function useMediaQuery(query) {
-  const [state, setState] = useState(IS_BROWSER && getInitialState(query));
+  const [isMatch, setIsMatch] = useState(IS_BROWSER && getInitialState(query));
 
   useEnhancedEffect(() => {
     let mounted = true;
@@ -26,10 +26,12 @@ function useMediaQuery(query) {
       if (!mounted) return;
 
       /* istanbul ignore next */
-      setState(mediaQueryList.matches);
+      setIsMatch(mediaQueryList.matches);
     };
 
-    setState(mediaQueryList.matches);
+    mediaQueryList.addEventListener('change', handleChange);
+
+    setIsMatch(mediaQueryList.matches);
 
     return () => {
       mounted = false;
@@ -38,7 +40,7 @@ function useMediaQuery(query) {
     };
   }, [query]);
 
-  return state;
+  return isMatch;
 }
 
 function getInitialState(query) {