hooks useMediaQuery.tsx

8.33% Statements 1/12

0% Branches 0/2

0% Functions 0/4

10% Lines 1/10

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  
 
66x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { useState, useEffect } from 'react';
 
const useMediaQuery = (query: string): boolean => {
  const [matches, setMatches] = useState(window.matchMedia(query).matches);
 
  useEffect((): (() => void) => {
    const media = window.matchMedia(query);
    if (media.matches !== matches) {
      setMatches(media.matches);
    }
    const listener: (() => void) = () => setMatches(media.matches);
    media.addListener(listener);
    return () => media.removeListener(listener);
  }, [matches, query]);
 
  return matches;
};
 
export default useMediaQuery;