CedarCopilot/cedar-mail

import { useEffect, useState } from 'react';

/** Pass to `useMediaQuery` to respect the OS "reduce motion" setting. */
export const REDUCED_MOTION_QUERY = '(prefers-reduced-motion: reduce)';

export function useMediaQuery(query: string) {
  // Initialize with the correct value immediately to avoid re-render on mount
  const [matches, setMatches] = useState(() => {
    // Check if we're in a browser environment
    if (typeof window !== 'undefined') {
      return window.matchMedia(query).matches;
    }
    return false;
  });

  useEffect(() => {
    const media = window.matchMedia(query);

    // Handler for when the media query state changes
    const listener = (event: MediaQueryListEvent) => {
      setMatches(event.matches);
    };

    // Add listener for future changes
    media.addEventListener('change', listener);

    return () => {
      media.removeEventListener('change', listener);
    };
  }, [query]);

  return matches;
}