fix(useMediaQueries): Add event listeners to small and large instead …

…of medium (#5074)
cultureamp · Sep 24, 2024 · 3ee2e8a · 3ee2e8a
1 parent f58c5b6
commit 3ee2e8a
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/.changeset/popular-moons-sip.md b/.changeset/popular-moons-sip.md
@@ -0,0 +1,5 @@
+---
+"@kaizen/components": patch
+---
+
+fix(useMediaQueries): values will now update when jumping from small to large, or vice versa
diff --git a/packages/components/src/utils/useMediaQueries.tsx b/packages/components/src/utils/useMediaQueries.tsx
@@ -97,7 +97,7 @@ export const useMediaQueries = (
   })
 
   // ---------------------------------------
-  // Create an event listener based on the medium breakpoint and update state whenever it changes
+  // Create an event listener based on the small and large breakpoints and update state whenever one of those changes
   // ---------------------------------------
   useEffect(() => {
     if (isLegacyEdge || isUnsupportedSafari) {
@@ -118,10 +118,12 @@ export const useMediaQueries = (
       })
     }
 
-    mediumMatchMedia.addEventListener("change", updateMatches, true)
+    smallMatchMedia.addEventListener("change", updateMatches, true)
+    largeMatchMedia.addEventListener("change", updateMatches, true)
 
     return () => {
-      mediumMatchMedia.removeEventListener("change", updateMatches)
+      smallMatchMedia.removeEventListener("change", updateMatches)
+      largeMatchMedia.removeEventListener("change", updateMatches)
     }
   }, [])