【React】「streamich/use-media」の代替で「streamich/react-use」のuseMediaを使う

4455 ワード
React tech テキストリンク

概要

Reactのロジックでレスポンシブの判定を行いたい場合、【React】useMediaで簡単にレスポンシブ対応で紹介されている、streamich/use-mediaのライブラリを使うのが候補に挙げられるでしょう。
ただ、streamich/use-mediaについては、2022年4月現在だと最終更新日が2021年の1月になっていて、今後メンテナンスされるかがちょっと不安になります。
ということで、今回はstreamich/use-mediaの代替となるライブラリを紹介したいと思います。

代替候補

同じ作者の方がstreamich/react-useというライブラリを作成されていて、これがHooksの便利メソッド集のようなものになっています。
このライブラリで用意されているuse-mediaを使えば、ほぼ同様の実装で代替できそうです。

実装サンプル

以下がstreamich/use-mediaを使ったサンプルで、

import useMedia from "use-media";

export default function UserRegisterComponent(prop) {
  const isWide = useMedia({ minWidth: "800px" });
  return <>{isWide ? "Wide" : "NotWide"}</>;
}

これをstreamich/react-useのuse-mediaを使うと、以下のような実装になります。

import { useMedia } from "react-use";

export default function UserRegisterComponent(prop) {
  const isWide = useMedia("(min-width: 800px)"); // useMediaの指定の仕方を修正
  return <>{isWide ? "Wide" : "NotWide"}</>;
}
【Figma Tokens × Style Dictionary】デザインシステムはじめの一歩
【改訂】はじめての Playwright