use-mobile

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