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

90.47% Statements 19/21
80% Branches 4/5
50% Functions 1/2
90.47% Lines 19/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
    221x
    1x
    1x
    1x
    1x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x

    8x
    8x
    8x
    8x
    8x
    8x
     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
    }