usePrefersReducedMotion
Tracks the user's prefers-reduced-motion media setting.
About
usePrefersReducedMotion subscribes to (prefers-reduced-motion: reduce) and returns whether the user has requested less non-essential motion.
Examples
import { usePrefersReducedMotion } from "rooks";
export default function MotionAwareNotice() {
const reduceMotion = usePrefersReducedMotion();
return (
<p style={{ transition: reduceMotion ? "none" : "opacity 300ms" }}>
Motion preference: {reduceMotion ? "reduced" : "no preference"}
</p>
);
}Parameters
This hook accepts no parameters.
Return value
A boolean: true when the media query matches, otherwise false.
Behavior and lifecycle
The hook uses useSyncExternalStore through useMediaMatch. It reads window.matchMedia, subscribes to its change event, and removes that listener on unmount. The server snapshot is false; after hydration the client snapshot may update to the real preference.
Compatibility and accessibility
Browsers without matchMedia are not given a fallback and can throw on the client. Treat true as a request to remove or shorten non-essential animation, parallax, and auto-motion. Do not disable essential progress or state information; present it without motion instead.