Sanity UI
Docs
Arcade
Migrate to v4
  1. Docs
  2. Hooks
  3. usePrefersReducedMotion

usePrefersReducedMotion()

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.

Signature  

(getServerSnapshot = () => false) => boolean
Made withby folks at