Is Mobile

A hook to check if the screen width is less than the mobile breakpoint.

use-mobile.tsx

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

Loved this post?

🍕 Buy me a pizzaDonate via

Comments