useMediaQuery

import { useState, useEffect } from 'react';
 
export function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState<boolean>(() => {
    if (typeof window === 'undefined') {
      return false;
    }
    return window.matchMedia(query).matches;
  });
 
  useEffect(() => {
    if (typeof window === 'undefined') {
      return;
    }
 
    const mediaQuery = window.matchMedia(query);
    setMatches(mediaQuery.matches);
 
    const handler = (event: MediaQueryListEvent) => {
      setMatches(event.matches);
    };
 
    mediaQuery.addEventListener('change', handler);
 
    return () => {
      mediaQuery.removeEventListener('change', handler);
    };
  }, [query]);
 
  return matches;
}

function Layout({ children }) {
  const isDesktop = useMediaQuery('(min-width: 1024px)');
  const [sidebarOpen, setSidebarOpen] = useState(false);
 
  // Auto-close sidebar on mobile when navigating
  useEffect(() => {
    if (!isDesktop) {
      setSidebarOpen(false);
    }
  }, [isDesktop]);
 
  return (
    <div className="flex">
      {(isDesktop || sidebarOpen) && (
        <aside className="w-64 border-r">
          <nav>...</nav>
        </aside>
      )}
      <main className="flex-1">{children}</main>
    </div>
  );
}

function Navigation() {
  const isMobile = useMediaQuery('(max-width: 768px)');
 
  if (isMobile) {
    return <MobileNav />;
  }
 
  return <DesktopNav />;
}

function ThemeProvider({ children }) {
  const prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
  const [theme, setTheme] = useLocalStorage('theme', 'system');
 
  const isDark = theme === 'system' ? prefersDark : theme === 'dark';
 
  return (
    <div className={isDark ? 'dark' : ''}>
      {children}
    </div>
  );
}

function AnimatedComponent() {
  const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
 
  return (
    <motion.div
      animate={{ x: 100 }}
      transition={{
        duration: prefersReducedMotion ? 0 : 0.3,
      }}
    >
      Content
    </motion.div>
  );
}

// hooks/useBreakpoint.ts
export function useBreakpoint() {
  const sm = useMediaQuery('(min-width: 640px)');
  const md = useMediaQuery('(min-width: 768px)');
  const lg = useMediaQuery('(min-width: 1024px)');
  const xl = useMediaQuery('(min-width: 1280px)');
  const xxl = useMediaQuery('(min-width: 1536px)');
 
  return { sm, md, lg, xl, xxl };
}
 
// Usage
function Component() {
  const { md, lg } = useBreakpoint();
 
  const columns = lg ? 4 : md ? 2 : 1;
 
  return <Grid columns={columns}>...</Grid>;
}