fix: add useReducedMotion compatibility for Safari 13 and older (#2300

)
pmndrs · Jul 9, 2024 · a755bd8 · a755bd8
1 parent f96db5e
commit a755bd8
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/.changeset/stale-owls-double.md b/.changeset/stale-owls-double.md
@@ -0,0 +1,5 @@
+---
+'@react-spring/shared': patch
+---
+
+fix: MediaQueryList.addListener safari 13 (and older) compatibility
diff --git a/packages/shared/src/hooks/useReducedMotion.ts b/packages/shared/src/hooks/useReducedMotion.ts
@@ -26,10 +26,18 @@ export const useReducedMotion = () => {
 
     handleMediaChange(mql)
 
-    mql.addEventListener('change', handleMediaChange)
+    if (mql.addEventListener) {
+      mql.addEventListener('change', handleMediaChange)
+    } else {
+      mql.addListener(handleMediaChange)
+    }
 
     return () => {
-      mql.removeEventListener('change', handleMediaChange)
+      if (mql.removeEventListener) {
+        mql.removeEventListener('change', handleMediaChange)
+      } else {
+        mql.removeListener(handleMediaChange)
+      }
     }
   }, [])