import { useState, useEffect } from 'react';
export const useMediaQuery = (query: string): boolean => {
const [matches, setMatches] = useState(false);
useEffect(() => {
const media = window.matchMedia(query);
// Set initial value
setMatches(media.matches);
// Create listener
const listener = (event: MediaQueryListEvent) => {
setMatches(event.matches);
};
// Add listener
if (media.addEventListener) {
media.addEventListener('change', listener);
} else {
// Fallback for older browsers
media.addListener(listener);
}
// Cleanup
return () => {
if (media.removeEventListener) {
media.removeEventListener('change', listener);
} else {
media.removeListener(listener);
}
};
}, [query]);
return matches;
};