Use Reduced Motion

import { UseReducedMotionDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.useReducedMotion);

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.

Definition

interface UseMediaQueryOptions {
  getInitialValueInEffect: boolean;
}

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