はじめに
環境
- mui/material: ^5.15.5
- next: 14.0.3
- typescript: ^5
MediaQueryの判別用ファイル
import useMediaQuery from '@mui/material/useMediaQuery';
import { useTheme } from '@mui/material/styles';
type MediaQueryBreakPointType = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
type MediaQueryDirection = 'up' | 'down' | 'only';
const mediaQuery = (
breakPoint: MediaQueryBreakPointType,
direction: MediaQueryDirection
): boolean => {
const theme = useTheme();
let matches;
if (direction === 'up') {
matches = useMediaQuery(theme.breakpoints.up(breakPoint));
} else if (direction === 'down') {
matches = useMediaQuery(theme.breakpoints.down(breakPoint));
} else if (direction === 'only') {
matches = useMediaQuery(theme.breakpoints.only(breakPoint));
} else {
return false;
}
return matches;
};
const isScreenSizeAbove = (breakPoint: MediaQueryBreakPointType): boolean => {
return mediaQuery(breakPoint, 'up');
};
const isScreenSizeBelow = (breakPoint: MediaQueryBreakPointType): boolean => {
return mediaQuery(breakPoint, 'down');
};
export { isScreenSizeAbove, isScreenSizeBelow };
if (!isScreenSizeAbove('sm')) return (<></>); // スマホサイズは非表示
おわりに
こういったファイルを使用せず、直接 useMediaQuery
を指定すればよいかもしれませんが、
一部判定範囲を変更するときや、useMediaQuery
に px 指定する場合などは、
このように共通化されたファイルにまとめておくと、柔軟性や拡張性が上がります。