From 52393daffe7baec8af53bc2359d74077ddd1e2bb Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Fri, 4 Feb 2022 11:01:44 +0000
Subject: [PATCH] fix(useMediaQuery): adds fallback to matchMedia (#4289)

---
 beta/src/components/Layout/useMediaQuery.tsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/beta/src/components/Layout/useMediaQuery.tsx b/beta/src/components/Layout/useMediaQuery.tsx
index 3d541bd7..db1e6188 100644
--- a/beta/src/components/Layout/useMediaQuery.tsx
+++ b/beta/src/components/Layout/useMediaQuery.tsx
@@ -17,14 +17,29 @@ const useMediaQuery = (width: number) => {
 
   useEffect(() => {
     const media = window.matchMedia(`(max-width: ${width}px)`);
-    media.addEventListener('change', updateTarget);
+
+    try {
+      // Chrome & Firefox
+      media.addEventListener('change', updateTarget);
+    } catch {
+      // @deprecated method - Safari <= iOS12
+      media.addListener(updateTarget);
+    }
 
     // Check on mount (callback is not called until a change occurs)
     if (media.matches) {
       setTargetReached(true);
     }
 
-    return () => media.removeEventListener('change', updateTarget);
+    return () => {
+      try {
+        // Chrome & Firefox
+        media.removeEventListener('change', updateTarget);
+      } catch {
+        // @deprecated method - Safari <= iOS12
+        media.removeListener(updateTarget);
+      }
+    };
   }, [updateTarget, width]);
 
   return targetReached;