hooks useIsMobile.ts

0% Statements 0/17

0% Branches 0/1

0% Functions 0/1

0% Lines 0/17

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
23
24
25
26
27  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { useState, useEffect } from 'react';
 
const MOBILE_BREAKPOINT = 768; // md breakpoint
 
export function useIsMobile(): boolean {
  const [isMobile, setIsMobile] = useState(() =>
    typeof window !== 'undefined' ? window.innerWidth < MOBILE_BREAKPOINT : false
  );
 
  useEffect(() => {
    const mediaQuery = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
 
    const handleChange = (e: MediaQueryListEvent) => {
      setIsMobile(e.matches);
    };
 
    // Set initial value
    setIsMobile(mediaQuery.matches);
 
    // Modern browsers support addEventListener
    mediaQuery.addEventListener('change', handleChange);
    return () => mediaQuery.removeEventListener('change', handleChange);
  }, []);
 
  return isMobile;
}