React hook to disable animations for users which prefer reduced motion

useReducedMotion.tsx

import { useState, useEffect } from "react";

export function useReducedMotion() {
  const [matches, setMatch] = useState(
    window.matchMedia("(prefers-reduced-motion: reduce)").matches
  );

  useEffect(() => {
    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
    const handleChange = () => {
      setMatch(mediaQuery.matches);
    };

    handleChange();

    mediaQuery.addEventListener("change", handleChange);
    return () => {
      mediaQuery.removeEventListener("change", handleChange);
    };
  }, []);

  return matches;
}

// Usage
// const prefersReducedMotion = useReducedMotion();

// useEffect(() => {
//   Globals.assign({
//     skipAnimation: prefersReducedMotion,
//   });
// }, [prefersReducedMotion]);