`useReduceMotion`

Returns true when the user has requested reduced motion at the OS level. Use it to gate animations and transitions for accessibility. Internally a thin wrapper around useMediaQuery('(prefers-reduced-motion: reduce)').


import { useReduceMotion } from '@wire-ui/react'
 
function FadeIn({ children }: { children: React.ReactNode }) {
  const reduceMotion = useReduceMotion()
  const duration = reduceMotion ? 0 : 200
 
  return (
    <div style={{ transition: `opacity ${duration}ms` }}>
      {children}
    </div>
  )
}

Returns

boolean — true while the user has requested reduced motion.