Documentation
usePrefersReducedMotion
Detect user's motion preference for accessibility.
Installation
pnpm add @rouf-dev/pantheon-uiUsage
"use client";
import { usePrefersReducedMotion } from "@rouf-dev/pantheon-ui";
export function AnimatedComponent() {
const prefersReducedMotion = usePrefersReducedMotion();
return (
<div
className={prefersReducedMotion ? '' : 'animate-slide-in'}
>
{prefersReducedMotion
? 'Animations disabled for accessibility'
: 'Animated content'}
</div>
);
}Return Value
boolean: True if user prefers reduced motion