Use Mobile

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