useReducedMotion Hook
A React hook that detects the user's reduced motion preference using useSyncExternalStore for React 18+ concurrent mode safety.
Installation
$ npx shadcn@latest add @orecus/use-reduced-motionA React hook that detects the user's reduced motion preference using useSyncExternalStore for React 18+ concurrent mode safety.
$ npx shadcn@latest add @orecus/use-reduced-motionimport { useReducedMotion } from "@/components/ui/orecus.io/lib/use-reduced-motion";// Returns true if user prefers reduced motionconst prefersReducedMotion = useReducedMotion();// Use with motion components<motion.div animate={prefersReducedMotion ? {} : { scale: 1.1 }}> Content</motion.div>