Overview

useReducedMotion is part of the @usefy ecosystem — a collection of production-ready, TypeScript-first, SSR-safe React hooks. Track the user's reduced-motion preference (prefers-reduced-motion).

Features

• A11y-first — honor motion sensitivity
• Live — reflects setting changes immediately
• SSR-safe — configurable default
• TypeScript-first — full type inference and exported types
• Tiny & tree-shakeable — zero dependencies, published as its own package

Installation

# npm
npm install @usefy/use-reduced-motion

# yarn
yarn add @usefy/use-reduced-motion

# pnpm
pnpm add @usefy/use-reduced-motion

Requires React 18 or 19 (peerDependencies: "react": "^18.0.0 || ^19.0.0").

Quick Start

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

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

API

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.

Testing

📊 View Detailed Coverage Report (GitHub Pages) — 9 tests, 100% statement coverage.

License

MIT © mirunamu

This package is part of the usefy monorepo.