usePrefersReducedMotion

Tracks whether the user has requested reduced motion via (prefers-reduced-motion: reduce) and re-renders when it changes. SSR-safe — returns defaultValue (default false) on the server

Reduced motion requested: false

Enable “Reduce motion” in your OS accessibility settings to see this flip.


import { usePrefersReducedMotion } from 'react-stateful-hooks';
 
const reduceMotion = usePrefersReducedMotion();
 
<motion.div animate={reduceMotion ? undefined : { x: 100 }} />;

Signature


const reduceMotion = usePrefersReducedMotion(defaultValue?: boolean); // default: false

Built on top of useMediaQuery