usePrefersReducedMotion

usePrefersReducedMotion returns true when the user has turned on the "reduce motion" setting in their operating system, and re-renders when they change it. It is useMediaQuery for the (prefers-reduced-motion: reduce) query.

import { usePrefersReducedMotion } from "@piplup/utils";

function Hero() {
  const reduceMotion = usePrefersReducedMotion();

  return <video autoPlay={!reduceMotion} muted loop src="/hero.mp4" />;
}

Checking right before an animationCopy Anchor Link

prefersReducedMotion() reads the setting at call time. Use it in effects and event handlers, for example just before starting an animation, since the setting can change while the page is open.

import { prefersReducedMotion } from "@piplup/utils";

function scrollToTop() {
  window.scrollTo({ top: 0, behavior: prefersReducedMotion() ? "auto" : "smooth" });
}

Server renderingCopy Anchor Link

On the server the hook returns false (full motion) unless you pass options. It takes the same options as useMediaQuery, so { defaultMatches: true } renders the reduced version until the real setting is known.

ParametersCopy Anchor Link

Return valueCopy Anchor Link

boolean: true when the user prefers reduced motion.