aura-glass/dist/esm/hooks/useEnhancedReducedMotion.js

A comprehensive glassmorphism design system for React applications with 142+ production-ready components

'use client';
import { useState, useEffect } from 'react';
import { safeMatchMedia, isBrowser } from '../utils/env.js';

/**
 * Enhanced hook for detecting user's reduced motion preference.
 *
 * This hook monitors the user's system-level preference for reduced motion
 * and updates reactively when the preference changes. It's SSR-safe and
 * provides more granular control compared to the basic `useReducedMotion` hook.
 *
 * @returns {boolean} True if the user prefers reduced motion, false otherwise
 *
 * @example
 * ```tsx
 * function AnimatedComponent() {
 *   const prefersReducedMotion = useEnhancedReducedMotion();
 *
 *   return (
 *     <motion.div
 *       animate={{ opacity: 1 }}
 *       transition={prefersReducedMotion ? { duration: 0 } : { duration: 0.3 }}
 *     >
 *       Content
 *     </motion.div>
 *   );
 * }
 * ```
 *
 * @see {@link useReducedMotion} for a simpler version
 */
function useEnhancedReducedMotion() {
  const [prefersReducedMotion, setPrefersReducedMotion] = useState(() => {
    // SSR-safe initialization with conservative default
    return safeMatchMedia('(prefers-reduced-motion: reduce)')?.matches ?? true;
  });
  useEffect(() => {
    if (!isBrowser()) return;
    const mediaQuery = safeMatchMedia('(prefers-reduced-motion: reduce)');
    if (!mediaQuery) return;
    setPrefersReducedMotion(mediaQuery.matches);
    const handleChange = event => {
      setPrefersReducedMotion(event.matches);
    };
    if (typeof mediaQuery.addEventListener === 'function') {
      mediaQuery.addEventListener('change', handleChange);
      return () => mediaQuery.removeEventListener('change', handleChange);
    }
    if (typeof mediaQuery.addListener === 'function') {
      mediaQuery.addListener(handleChange);
      return () => mediaQuery.removeListener(handleChange);
    }
  }, []);
  return prefersReducedMotion;
}

export { useEnhancedReducedMotion };
//# sourceMappingURL=useEnhancedReducedMotion.js.map