【React】useMediaで簡単にレスポンシブ対応

2021-01-17

Content

はじめに

おはようございます！こんにちは！こんばんは！
麻雀と芝生大好きおじさんことのふのふ(@rpf_nob)です！！

今回はReactアプリケーションで簡単にレスポンシブ対応が実装できるuse-mediaというReact Hooksの便利なライブラリを紹介します！！

前提
use-mediaのインストール
use-mediaの使用方法
react-responsiveとの比較
react-responsiveのインストール
react-responsiveで同じ仕様を書く
ソースとデモ
まとめ

概要

CSSメディアクエリの状態を追跡するReactのフックです。

以下公式のREADME.mdにフックの使用方法とテスト方法が説明されていますので詳細はこちらを見てください。

use-mediaのインストール

お好きなほうでインストールしてください。

npm install --save use-media
or
yarn add use-media

use-mediaの使用方法

useMediaをインポートして、useMedia関数に閾値をオブジェクトで渡してあげれば、閾値を超えているかどうかの真偽値を取得できます。

以下の例だと、widthが1000pxを超えたら😃で、超えてなかったら😢が表示されます。

import useMedia from 'use-media';

const App = () => {
  const isWide = useMedia({minWidth: '1000px'});
  return (
    <div>
      Screen is wide: {isWide ? '😃' : '😢'}
    </div>
  );
};

react-responsiveとの比較

Reactアプリケーションでレスポンシブ対応させる時に、react-responsiveというパッケージを使っている人もいると思いますので、比較のために同じ仕様のコードを書いてみたいと思います。

react-responsiveのインストール

お好きなほうでインストールしてください。

npm install --save react-responsive
or
yarn add react-responsive

react-responsiveで同じ仕様を書く

react-responsiveを使って同じ仕様を書くと以下のようになります。

import MediaQuery from "react-responsive";

const App = () => {
  return (
    <>
      <MediaQuery query="(max-width: 999px)">
        <div>Screen is wide2: 😢</div>
      </MediaQuery>
      <MediaQuery query="(min-width: 1000px)">
        <div>Screen is wide2: 😃</div>
      </MediaQuery>
    </>
  );
};

好みであるかもしれませんが、use-mediaを用いた書き方のほうが短く書けますし、真偽値を用いて表示を切り替えるのでReactらしい書き方だと思います。

ソースとデモ

以下のCodesandboxでソースとデモを確認できます。

まとめ

今回はReactアプリケーションで簡単にレスポンシブ対応が実装できるuse-mediaというReact Hooksの便利なライブラリを紹介しました！！

react-responsiveを使うより短くかけたりするので、今後はこちらを使用していきたいと思いますので、皆さんも是非試してみてください。

今後も便利なReactのライブラリなどを紹介していきたいと思います！！
よろしければまた見てください！！！

最後まで見ていただきありがとうございます！！

Content[Close]