use-mobile.tsx raw

   1  import * as React from "react";
   2  
   3  const MOBILE_BREAKPOINT = 768;
   4  
   5  /**
   6   * @deprecated Don't use this method outside of shadcn components
   7   */
   8  export function useIsMobile() {
   9    const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
  10      undefined
  11    );
  12  
  13    React.useEffect(() => {
  14      const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
  15      const onChange = () => {
  16        setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
  17      };
  18      mql.addEventListener("change", onChange);
  19      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
  20      return () => mql.removeEventListener("change", onChange);
  21    }, []);
  22  
  23    return !!isMobile;
  24  }
  25