【MUI,Next.js】MediaQueryの判別ユーティルティ作成した。備忘録

はじめに

環境

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指定する場合などは、こういったファイルのようにまとめてあげると、柔軟性や拡張性が上がります。

参考文献

useMediaQueryBreakpoints