useReducedMotion

Browser & device

Track the user's reduced-motion preference (prefers-reduced-motion)

Install

$ npm install @usefy/use-reduced-motion

Quick start

useReducedMotion.tsx

import { useReducedMotion } from "@usefy/use-reduced-motion";

const reduced = useReducedMotion();
<div style={{ transition: reduced ? "none" : "transform 300ms" }} />;

API reference

useReducedMotion(options?): boolean

options.defaultValue — value returned on the server / when matchMedia is unavailable (default false).
options.initializeWithValue — when true (default), the real preference is read synchronously on the first client render. Set to false to render defaultValue on the first client render and defer the real read to a post-commit effect, avoiding a hydration mismatch when the server rendered defaultValue.

Go deeper

This page is the quick reference. For every example, prop, and edge case, read the full README — or open Storybook to change props live.

Full README →Open in Storybook →

Install

Quick start

API reference

Go deeper

More in browser & device