React入門 - Tips10 - useMediaQueryでレスポンシブ対応

目次

useMediaQuery

pcとスマートフォンでの表示切替が必要な時に使用します。

実装方法(useMediaQueryのhook)

use-media-query.tsx

import { useEffect, useState } from 'react'

export const useMedia = () => {
  const queryStrings = {
    pc: 'screen and (min-width: 768px)',
    sp: 'screen and (max-width: 767px)',
    short: 'screen and (max-height: 480px)',
  };
  const [test, setTest] = useState(null);

  useEffect(() => {
    let timeout;
    const onResize = () => {
      if (timeout) return
      if (typeof window === "undefined") {
        setTest(null);
      } else {
        setTest( Object.fromEntries(
          Object.entries(queryStrings).map(([k, v]: [string, string]) => [
            k,
            window.matchMedia(v),
          ])
        ));
      }
      timeout = setTimeout(() => timeout = null, 500)
    }

    window.addEventListener('resize', onResize)
    return () => window.removeEventListener('resize', onResize)
  })  

  return test;
};

実装方法(コンポーネント側)

media-query-test.tsx

import React, {useMemo} from 'react'
import {useMedia} from './use-media-query';

export const Comp:React.FC = (props) => {
  const media = useMedia();
  const isSP =  media ? media.sp.matches : false;

  return <span>現在は{isSP ? "SP" : "PC"}で表示しています。</span>
}

export default Comp

まとめ

動かしてみてください。
ブラウザの幅を変えると表示が変わると思います。
割と簡単に実装出来ました。

ちょっと調べたら、こんな感じのreact-responseなるものでもっと簡単に
実装可能みたいです。試してないけど。