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

88.23% Statements 15/17
100% Branches 3/3
50% Functions 1/2
88.23% Lines 15/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 221x   1x   1x 12x 12x 12x   12x 6x 6x     6x 6x 6x 12x   12x 12x  
import * as React from 'react';
 
const MOBILE_BREAKPOINT = 768;
 
export function useIsMobile(): boolean {
  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
    undefined,
  );
 
  React.useEffect(() => {
    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
    const onChange = (): void => {
      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
    };
    mql.addEventListener('change', onChange);
    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
    return (): void => mql.removeEventListener('change', onChange);
  }, []);
 
  return !!isMobile;
}