useReducedMotion

A hook that returns true if the current device has Reduced Motion setting enabled.

const shouldReduceMotion = useReducedMotion()

This can be used to implement changes to your UI based on Reduced Motion. For instance, replacing potentially motion-sickness inducing x/y animations with opacity, disabling the autoplay of background videos, or turning off parallax motion.

It will actively respond to changes and re-render your components with the latest setting.

export function Sidebar({ isOpen }) {
  const shouldReduceMotion = useReducedMotion()
  const closedX = shouldReduceMotion ? 0 : "-100%"

  return (
    <motion.div animate={{
      opacity: isOpen ? 1 : 0,
      x: isOpen ? 0 : closedX
    }} />
  )
}

Usage

Import useReducedMotion from Motion:

import { useReducedMotion } from "motion/react"

In any component, call useReducedMotion to check whether the device's Reduced Motion setting is enabled.

const prefersReducedMotion = useReducedMotion()

You can then use this true/false value to change your application logic.