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

2024-02-23

はじめに

環境

  • 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 指定する場合などは、
このように共通化されたファイルにまとめておくと、柔軟性や拡張性が上がります。

参考文献