useReducedMotion

Hook to detect if the user prefers reduced motion.

Usage

import { useReducedMotion } from "@spectre-ui/hooks";

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

  return (
    <div style={{
      transition: prefersReducedMotion ? "none" : "transform 0.3s"
    }}>
      Content
    </div>
  );
}