prometheus/web/ui/react-app/src/hooks/useMedia.ts
Augustin Husson af7aab7937 add global mock for the matchMedia function
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
2021-09-14 15:49:46 +02:00

18 lines
537 B
TypeScript

import { useEffect, useState } from 'react';
// A hook to determine whether a CSS media query finds any matches.
const useMedia = (query: string): boolean => {
const mediaQuery = window.matchMedia(query);
const [matches, setMatches] = useState(mediaQuery.matches);
useEffect(() => {
const handler = () => setMatches(mediaQuery.matches);
mediaQuery.addEventListener('change', handler);
return () => mediaQuery.removeEventListener('change', handler);
}, [mediaQuery]);
return matches;
};
export default useMedia;