# All files / src/hooks use-mobile.ts

0% Statements 0/21
0% Branches 0/1
0% Functions 0/1
0% Lines 0/21

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22

     import { useEffect, useState } from "react"

    const MOBILE_BREAKPOINT = 768

    export function useIsMobile() {
      const [isMobile, setIsMobile] = useState<boolean | undefined>(() => {
        if (typeof window === "undefined") return undefined
        return window.innerWidth < MOBILE_BREAKPOINT
      })

      useEffect(() => {
        const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
        const onChange = () => {
          setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
        }
        mql.addEventListener("change", onChange)
        return () => mql.removeEventListener("change", onChange)
      }, [])

      return !!isMobile
    }