Detect if user prefers to reduce motion
use-reduced-motion detects if user prefers to reduce motion.
It uses use-media-query hook under the hood.
Hook relies on
and will always return
false if api is not available (e.g. during server side rendering), unless initial value is provided in the first argument.
Use hook to detect if user prefers to reduce motion (
(prefers-reduced-motion: reduce) media query) and set animations duration based on this value.
All Mantine components which use animations support it by default:
You prefer not to reduce motion