useReducedMotion
Hooks

useReducedMotion

Whether the reader has asked for less motion, tracked live.

Signature

SignatureTypeScript
function useReducedMotion(): boolean;

/** One-shot read, for imperative code that decides at the moment it acts. */
function prefersReducedMotion(): boolean;

Usage

Use useReducedMotion during rendering. Use the exported query function in event handlers or animation loops to read the current preference without subscribing to React state.

ExampleTSX
import { useEffect } from "react";
import { useReducedMotion } from "@solarius/onset";

function AutoAdvance({
  intervalMs,
  next,
}: {
  intervalMs: number;
  next: () => void;
}) {
  const reduced = useReducedMotion();

  useEffect(() => {
    if (reduced || intervalMs <= 0) return;
    const timer = setInterval(next, intervalMs);
    return () => clearInterval(timer);
  }, [reduced, intervalMs, next]);

  return null;
}

Component CSS respects prefers-reduced-motion. Set --m-transition-* tokens to 0s linear on a theme root to disable transitions independently of the system setting.