useMediaを利用したレスポンシブ対応

ReactでuseMediaを利用してレスポンシブ対応する方法を記載します。 React18より前では、use-mediaをインストールするとよかったのですが、 古いためか--legacy-peer-depsなどを付けないとインストールできない状態です。

代替となるreact-useを利用する方法を紹介します。

react-useの利用

ソースコードの例はこちらから参照できます。 参考にしてください。

まずはインストールです。 以下でインストールできます。

npm install --save use-media

以下のように書くことで、条件に当てはまるか当てはまらないかを true,falseで取得できます。

const isWide = useMedia('(min-width: 780px)');

これを利用して参考のソースではスタイルを切り替えています。

<iframe
  title="xxx"
  src="xxxx"
  style=
  allowFullScreen={true}
  loading="lazy"
  referrerPolicy="no-referrer-when-downgrade"
></iframe>

例ではGoogleの地図情報を表示しています。 幅によってwidthを切り替えています。

また、useMediaを利用すると、テストでエラーが出るようになります。
その対処方法はこちらに記載しています。

まとめ

react-useのuseMediaを利用する方法を記載しました。 React18ではuse-Mediaだと少し古い扱いのようです。

useMediaを利用するとテストがエラーになるのでリンクを参考に対処してみてください。

作成日:2023-01-16　 更新日:2023-01-16