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

1 min read読了の目安(約1400字

概要

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

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

Material-UIって?

https://material-ui.com/
  • React用のMaterial Design構築のためのコンポーネントライブラリ。
  • コンポーネントを配置するだけで、統一されたデザインのページが作れます。

実装

環境準備

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>;
};

説明

useMediaQueryって?

公式見ましょう。

https://material-ui.com/components/use-media-query/
  • CSSのMediaQueryを監視するよ。
  • マッチするかどうか判定するよ。

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

breakpointsって?

breakpointsについても、公式を見ましょう。

https://material-ui.com/ja/customization/breakpoints/

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

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

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

コード

今回のコードはこちらに置きました。

https://github.com/obuchi3/material-ui-use-size/