【MUI, Next.js】Created a MediaQuery Detection Utility. Memo

2025-06-03

Introduction

Environment

  • mui/material: ^5.15.5
  • next: 14.0.3
  • typescript: ^5

MediaQuery Detection File

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 (<></>); // Hide for smartphone size

Conclusion

While it may be sufficient to directly use useMediaQuery without creating such a file,
having a common utility like this improves flexibility and extensibility,
especially when changing detection ranges or specifying px values.

References