【React】useMediaで簡単にレスポンシブ対応
2021-01-17Content
はじめに
おはようございます!こんにちは!こんばんは!
麻雀と芝生大好きおじさんことのふのふ(@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のライブラリなどを紹介していきたいと思います!!
よろしければまた見てください!!!
最後まで見ていただきありがとうございます!!