Skip to content

Commit a755bd8

Browse files
fix: add useReducedMotion compatibility for Safari 13 and older (#2300)
1 parent f96db5e commit a755bd8

File tree

2 files changed

+15
-2
lines changed

2 files changed

+15
-2
lines changed

.changeset/stale-owls-double.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@react-spring/shared': patch
3+
---
4+
5+
fix: MediaQueryList.addListener safari 13 (and older) compatibility

packages/shared/src/hooks/useReducedMotion.ts

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,18 @@ export const useReducedMotion = () => {
2626

2727
handleMediaChange(mql)
2828

29-
mql.addEventListener('change', handleMediaChange)
29+
if (mql.addEventListener) {
30+
mql.addEventListener('change', handleMediaChange)
31+
} else {
32+
mql.addListener(handleMediaChange)
33+
}
3034

3135
return () => {
32-
mql.removeEventListener('change', handleMediaChange)
36+
if (mql.removeEventListener) {
37+
mql.removeEventListener('change', handleMediaChange)
38+
} else {
39+
mql.removeListener(handleMediaChange)
40+
}
3341
}
3442
}, [])
3543

0 commit comments

Comments
 (0)