use-reduced-motion

Usage

The use-reduced-motion hook detects if the user prefers to reduce motion. It uses the use-media-query hook under the hood. The hook relies on the window.matchMedia() API and will always return false if the API is not available (for example, during server-side rendering), unless the initial value is provided in the first argument.

Use the hook to detect if the user prefers to reduce motion ((prefers-reduced-motion: reduce) media query) and set animation duration based on this value.

import { Badge } from '@mantine/core';
import { useReducedMotion } from '@mantine/hooks';

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>
  );
}

Definition

interface UseMediaQueryOptions {
  getInitialValueInEffect: boolean;
}

function useReducedMotion(initialValue?: boolean, options?: UseMediaQueryOptions): boolean;