useReducedMotion

useReducedMotion() reads the prefers-reduced-motion: reduce media query and reactively updates when the user's preference changes. Use it to conditionally skip animations for users who have enabled reduced motion in their OS accessibility settings.

The hook returns false during SSR to avoid hydration mismatches, then updates to the actual preference on the client.

import { useReducedMotion } from '@c15t/react/hooks';

function AnimatedBanner() {
  const prefersReducedMotion = useReducedMotion();

  return (
    <div
      style={{
        transition: prefersReducedMotion ? 'none' : 'opacity 300ms ease',
        opacity: 1,
      }}
    >
      Consent banner content
    </div>
  );
}

Return Value