use-reduced-motion

Detect if user prefers to reduce motion
Import

Usage

use-reduced-motion detects if user prefers to reduce motion. It uses use-media-query hook under the hood. Hook relies on window.matchMedia() API and will always return false if api is not available (e.g. during server side rendering).

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
import { Badge } from '@mantine/core';
import { useReducedMotion } from '@mantine/hooks';
export function Demo() {
const reduceMotion = useReducedMotion();
return (
<Badge
color={reduceMotion ? 'red' : 'teal'}
style={{ transitionDuration: reduceMotion ? '0ms' : '200ms' }}
variant="filled"
>
{reduceMotion ? 'You prefer to reduce motion' : 'You prefer not to reduce motion'}
</Badge>
);
}
Build fully functional accessible web applications with ease
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback