threed-ai/src/hooks/prefers-reduced-motion.jsx

'threed-ai' supporting Vite, Next, Nuxt, as a functioning, low-dependency app, a package supporting monorepos of workspaces that utilize 'ThreeJS, WebGL, React, TypeScript <r3Fiber>, GraphQL'.

import React from "react";

// User system can indicate reduced motion setting https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

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

export function usePrefersReducedMotion() {
  const [prefersReducedMotion, setPrefersReducedMotion] = React.useState(
    !window.matchMedia(query).matches
  );
  React.useEffect(() => {
    const mediaQueryList = window.matchMedia(query);
    const listener = event => {
      setPrefersReducedMotion(!event.matches);
    };
    mediaQueryList.addListener(listener);
    return () => {
      mediaQueryList.removeListener(listener);
    };
  }, []);
  return prefersReducedMotion;
}