Handle Safari < 14.

https://stackoverflow.com/questions/62693995/addeventlistener-is-not-a-function-for-matchmedia-in-safari-browser/75517985#75517985
ethyca · Oct 23, 2024 · 0500406 · 0500406
1 parent 9f51bcd
commit 0500406
Showing 1 changed file with 13 additions and 2 deletions.
diff --git a/clients/fides-js/src/lib/hooks/useMediaQuery.ts b/clients/fides-js/src/lib/hooks/useMediaQuery.ts
@@ -14,9 +14,20 @@ export const useMediaQuery = (query: string) => {
     function handleChange(e: MediaQueryListEvent) {
       setMatches(e.matches);
     }
-    matchQueryList.addEventListener("change", handleChange);
+
+    if (matchQueryList.addEventListener) {
+      matchQueryList.addEventListener("change", handleChange);
+    } else {
+      // Supports Safari < 14
+      matchQueryList.addListener(handleChange);
+    }
     return () => {
-      matchQueryList.removeEventListener("change", handleChange);
+      if (matchQueryList.removeEventListener) {
+        matchQueryList.removeEventListener("change", handleChange);
+      } else {
+        // Supports Safari < 14
+        matchQueryList.removeListener(handleChange);
+      }
     };
   }, [query]);
   return matches;