Subscribes to
@media (prefers-reduced-motion: reduce) to find out if the user prefers reduced motion at any given time.import {usePrefersReducedMotion} from '@sanity/ui'
function App() {
// This value will change when the system setting
// for reduced motion is toggled.
const prefersReducedMotion = usePrefersReducedMotion()
return (
<div style={{transition: prefersReducedMotion ? 'none' : 'transform 200ms'}}>
...
</div>
)
}The optional
getServerSnapshot parameter is only called during server-side rendering, where (prefers-reduced-motion: no-preference) is assumed by default.(getServerSnapshot = () => false) => boolean