use Reduced Motion
Returns true when the user prefers reduced motion. All animation components use this hook internally.
Import
import { useReducedMotion } from "@sigil-ui/components";Usage
function MyAnimation() {
const reduced = useReducedMotion();
return (
<div
style={{
transition: reduced ? "none" : "transform 300ms ease",
transform: isActive ? "scale(1.05)" : "scale(1)",
}}
>
Content
</div>
);
}Returns
| Value | Type | Description |
|---|---|---|
reduced | boolean | true when prefers-reduced-motion: reduce matches |
Listens for live changes via MediaQueryList.addEventListener.