school_compare/nextjs-app/hooks/useIsMobile.ts

/**
 * Viewport hook shared by the chart components.
 * Hydration-safe: SSR and the first client render report desktop; the
 * media-query subscription flips the value after mount.
 */

'use client';

import { useEffect, useState } from 'react';

export function useIsMobile(maxWidth = 640): boolean {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const mq = window.matchMedia(`(max-width: ${maxWidth}px)`);
    const update = () => setIsMobile(mq.matches);
    update();
    mq.addEventListener('change', update);
    return () => mq.removeEventListener('change', update);
  }, [maxWidth]);

  return isMobile;
}