usePreferredReducedMotion()

Category

Browser

Export Size

274 B

Gzipped

186 B

SSR

SSR support

Last updated: 24/04/2026

Overview

usePreferredReducedMotion delegates to useMediaQuery('(prefers-reduced-motion: reduce)'), so it tracks the same accessibility signal as CSS with a live matchMedia subscription, SSR-safe defaults from useMediaQuery, and updates when the user enables “reduce motion” in macOS, Windows, or mobile accessibility settings. When true, you should skip large parallax transitions, autoplaying carousels, or decorative CSS animations; when false, you can still keep subtle, non-vestibular-triggering motion if your design system allows.

What it accepts

• None.

What it returns

• boolean - true if the user prefers reduced motion.

Usage

Conditionally render a CSS animation class on a badge (no JSON.stringify).

import usePreferredReducedMotion from '@dedalik/use-react/usePreferredReducedMotion'

function Example() {
  const reduceMotion = usePreferredReducedMotion()

  return (
    <div>
      <h3>Motion preference</h3>
      <p>
        <code>(prefers-reduced-motion: reduce)</code>: <strong>{reduceMotion ? 'yes' : 'no'}</strong>
      </p>
      <span
        style={{
          display: 'inline-block',
          padding: '6px 12px',
          borderRadius: 999,
          background: '#e0e7ff',
          animation: reduceMotion ? undefined : 'pulse-soft 1.6s ease-in-out infinite',
        }}
      >
        Status
      </span>
      <style>{`
        @keyframes pulse-soft {
          0%, 100% { transform: scale(1); opacity: 1; }
          50% { transform: scale(1.04); opacity: 0.85; }
        }
      `}</style>
    </div>
  )
}

export default function Demo() {
  return <Example />
}

API Reference

usePreferredReducedMotion

Signature: usePreferredReducedMotion(): boolean

Parameters

None.

Returns

boolean - Whether (prefers-reduced-motion: reduce) matches.

Copy-paste hook

TypeScript

import useMediaQuery from './useMediaQuery'

/**
 * Returns true when user prefers reduced motion.
 */
export default function usePreferredReducedMotion(): boolean {
  return useMediaQuery('(prefers-reduced-motion: reduce)')
}

JavaScript

import useMediaQuery from './useMediaQuery'

export default function usePreferredReducedMotion() {
  return useMediaQuery('(prefers-reduced-motion: reduce)')
}