Link to this headingContext
For some people, motion can be harmful.
prefers-reduced-motion CSS media query allows us to disable animations for these folks. For our animations that are entirely in CSS (eg. CSS transitions, CSS keyframe animations), this works great 💯
For these cases, I created a
I wrote a blog post all about this:
Link to this headingListening for changes
For the best possible user experience, we want to re-render components that rely on this hook when the user toggles prefers-reduced-motion on or off.
In older browsers, this is done with
mediaQueryList.addListener(...). This syntax has been updated in newer browsers to be a bit more conventional:
To make sure we support as many browsers as possible, we'll use both.
Link to this headingUsage
Link to this headingWith React Spring