25 lines
666 B
TypeScript
25 lines
666 B
TypeScript
import { useEffect, useState } from 'react';
|
|
|
|
export function useMediaQuery(query: string): boolean {
|
|
const [matches, setMatches] = useState<boolean>(false);
|
|
|
|
useEffect(() => {
|
|
if (typeof window === 'undefined') return; // Ensures no window access on the server
|
|
|
|
const matchMedia = window.matchMedia(query);
|
|
|
|
const handleChange = () => setMatches(matchMedia.matches);
|
|
|
|
// Set initial value
|
|
handleChange();
|
|
|
|
// Add and remove event listeners for changes
|
|
matchMedia.addEventListener('change', handleChange);
|
|
return () => {
|
|
matchMedia.removeEventListener('change', handleChange);
|
|
};
|
|
}, [query]);
|
|
|
|
return matches;
|
|
}
|