useReducedMotion

Hook to detect if user prefers to reduce motion.

Demo

INFO

The component display user preferences about reducing motion.

Loading demo…

Show source code

import { useReducedMotion } from "../../../../hooks/api-dom/useReducedMotion"

export const UseReducedMotion = () => {
	const value = useReducedMotion();

	return <>
		<p
			style={{ color: value ? "red" : "rgb(152, 195, 121)"}}
		>
			{value ? 'You prefer to reduce motion' : 'You prefer not to reduce motion'}
		</p>
	</>
}

Types

UseReducedMotionResult

Whether the prefers-reduced-motion media query is active, as returned by useReducedMotion. true when the user has requested reduced motion; false otherwise.

export type UseReducedMotionResult = boolean;