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

はじめに

おはようございます！こんにちは！こんばんは！
のふのふ(@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 のライブラリなどを紹介していきたいと思います！！ よろしければまた見てください！！！

最後まで見ていただきありがとうございます！！ この記事が良かったと思ったら SHARE していただけると泣いて喜びます 🤣