📱

Material-UI でモバイルサイズかどうか判定する

2021/04/06に公開

概要

今の画面サイズはPCサイズなのかい？モバイルサイズなのかい？どっちなんだいっ！？
と判定したくなるとき、ありますよね。

Material-UIのuseMediaQueryというhookを使い、判定してみます。

npx create-react-app material-ui-use-size --template typescript
cd material-ui-use-size
yarn add @material-ui/core

こんなカスタムフックを作ります。

const useSize = () => {
  const isMobileSize = useMediaQuery((theme: Theme) =>
    theme.breakpoints.down('xs')
  );
  return { isMobileSize };
};

const Sizing: FC = () => {
  const { isMobileSize } = useSize();
  return <div>{isMobileSize ? 'モバイルサイズだよ。' : 'PCサイズだよ。'}</div>;
};

というのをhookで使える感じです。

breakpoints.down('xs')と書くと、デフォルトでは600px以下かどうか？
という判定になります。
この部分、公式ページの表現と照らし合わせても分かりにくいです。

keyだけ見ると、breakpoints.down('sm')で600px以下じゃね？と思いましたが、
rangeを見ると、600pxまではxsみたいな書かれ方なので、これで良いです。

breakpointsはカスタムできるので、好きな閾値を設定できます。
なのでisMobileSize以外にも、isXXXSizeみたいなのを
カスタムフックに追加することもできます。