Blame view

泰额版/Food Labeling Management Platform/src/components/ui/use-mobile.ts 585 Bytes
884054fb   “wangming”   项目初始化
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  import * as React from "react";
  
  const MOBILE_BREAKPOINT = 768;
  
  export function useIsMobile() {
    const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
      undefined,
    );
  
    React.useEffect(() => {
      const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
      const onChange = () => {
        setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
      };
      mql.addEventListener("change", onChange);
      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
      return () => mql.removeEventListener("change", onChange);
    }, []);
  
    return !!isMobile;
  }