Feature request: add usePrefersReducedMotion

[thany]

I know this can be done with useMediaQuery, but just like useDarkMode, this would be a shortcut. It's an important one for when an application requires a switch through javascript in some way, rather than css, to enable or disable animations.

I've already written one. This one is SSR- and unittest-safe.

import { useEffect, useState } from 'react';

const query = '(prefers-reduced-motion: no-preference)';

const usePrefersReducedMotion = (): boolean => {
  // Default to no-animations, since we don't know what the
  // user's preference is on the server.
  const [prefersReducedMotion, setPrefersReducedMotion] = useState<boolean>(true);

  useEffect(() => {
    if (!window.matchMedia) {
      // Doesn't exist during unittesting
      return undefined;
    }
    const mediaQueryList = window.matchMedia(query);

    // Set the true initial value, now that we're on the client:
    setPrefersReducedMotion(!window.matchMedia(query).matches);

    // Register our event listener
    const listener = (event: MediaQueryListEvent): void => {
      setPrefersReducedMotion(!event.matches);
    };
    mediaQueryList.addEventListener('change', listener);
    return () => {
      mediaQueryList.removeEventListener('change', listener);
    };
  }, []);

  return prefersReducedMotion;
};

export default usePrefersReducedMotion;

Credit goes to this article by Josh Comeau, I just expanded on it a little by adding typings, mostly.