Animation & Timing
usePrefersReducedMotion
usePrefersReducedMotion
A React hook that returns true if the user has enabled the "prefers-reduced-motion" setting in their system.
Usage
import { usePrefersReducedMotion } from "rooks";
function App() {
const prefersReducedMotion = usePrefersReducedMotion();
return (
<div>
<p>Prefers Reduced Motion: {prefersReducedMotion ? "Yes" : "No"}</p>
<div
style={{
transition: prefersReducedMotion ? "none" : "all 0.3s ease",
opacity: 1,
}}
>
Animated Content
</div>
</div>
);
}Arguments
This hook takes no arguments.
Return Value
| Type | Description |
|---|---|
| boolean | True if the user prefers reduced motion, false otherwise. |