Rev 3095 | AutorÃa | Comparar con el anterior | Ultima modificación | Ver Log |
import { useLayoutEffect, useState } from 'react';
export function useMediaQuery(query, options = { defaultValue: false, initializeWithValue: true }) {
const getMatches = (query) => {
return window.matchMedia(query).matches;
};
const [matches, setMatches] = useState(() => {
if (options.initializeWithValue) {
return getMatches(query);
}
return options.defaultValue;
});
// Handles the change event of the media query.
function handleChange() {
setMatches(getMatches(query));
}
useLayoutEffect(() => {
const matchMedia = window.matchMedia(query);
handleChange();
matchMedia.addEventListener('change', handleChange);
return () => {
matchMedia.removeEventListener('change', handleChange);
};
}, [query]);
return matches;
}