diff --git a/.changeset/stale-owls-double.md b/.changeset/stale-owls-double.md new file mode 100644 index 0000000000..c240e58c22 --- /dev/null +++ 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 index e8211a1292..1b067b4fc6 100644 --- 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) + } } }, [])