useMediaQuery Hook
A custom React Hook for detecting media query matches (responsive design) with TypeScript support
Code
import { useState, useEffect } from 'react';
function useMediaQuery(query: string): boolean {
const [matches, setMatches] = useState(false);
useEffect(() => {
const mediaQuery = window.matchMedia(query);
const handleChange = (e: MediaQueryListEvent) => setMatches(e.matches);
setMatches(mediaQuery.matches);
mediaQuery.addEventListener('change', handleChange);
__TOKEN_13__ () => {
mediaQuery.removeEventListener('change', handleChange);
};
}, [query]);
return matches;
}
// Usage example
// const isMobile = useMediaQuery('(max-width: 768px)');
// const isTablet = useMediaQuery('(min-width: 769px) and (max-width: 1024px)');
// const isDarkMode = useMediaQuery('(prefers-color-scheme: dark)');