34 lines
1018 B
JavaScript
34 lines
1018 B
JavaScript
import { useEffect, useState } from 'react';
|
|
import { useTheme } from '@mui/material/styles';
|
|
|
|
function useThemeMediaQuery(themeCallbackFunc) {
|
|
const theme = useTheme();
|
|
|
|
const query = themeCallbackFunc(theme).replace('@media ', '');
|
|
|
|
const [matches, setMatches] = useState(getMatches(query));
|
|
|
|
function getMatches(q) {
|
|
return window.matchMedia(q).matches;
|
|
}
|
|
|
|
useEffect(
|
|
() => {
|
|
const mediaQuery = window.matchMedia(query);
|
|
// Update the state with the current value
|
|
setMatches(getMatches(query));
|
|
// Create an event listener
|
|
const handler = (event) => setMatches(event.matches);
|
|
// Attach the event listener to know when the matches value changes
|
|
mediaQuery.addEventListener('change', handler);
|
|
// Remove the event listener on cleanup
|
|
return () => mediaQuery.removeEventListener('change', handler);
|
|
},
|
|
[query] // Empty array ensures effect is only run on mount and unmount
|
|
);
|
|
|
|
return matches;
|
|
}
|
|
|
|
export default useThemeMediaQuery;
|