【React】デバイスによってレスポンシブに条件分岐できるreact-responsiveの紹介 #React

背景

reactで、レスポンシブウェブデザインを実装しようとしたとき、sp画面ではdisplay:none、pc画面ではdisplay:blockなどで画面の幅によって表示、非表示をcssで管理しなければならず、cssのことも意識してコードを見ないといけないので、可読性が落ちてしまっていた。特にチーム開発をしているとより煩わしく感じてしまっていました。

そんな中最近僕が見つけたreact-responsiveというパッケージのhook機能が便利だったのですが、他に紹介している記事があまりなかったのでここで紹介したいと思います。

主な機能

hook（超便利）
MediaQueryコンポーネント（こちらはいろんなサイトで紹介されていたので割愛します。知りたい方は末尾にURLを貼っておきます。）

v8.0.0からの追加機能でhookできるようになった

※現在はv8.2.0です。（2020/12/19地点）パッケージ情報

$ yarn add react-response 
$ yarn add --dev @types/react-response //typescript用

以下に示しますが、useMediaQuery()が使えるようになり、デバイスの幅によってbooleanを取得できるようになりました。これによって今までcssで状態を管理しなければならなかったものが条件分岐によって制御できるようになりました。

import React from "react"
import { useMediaQuery } from "react-response"

const Index = () => {
  const isMobileScreen: boolean = useMediaQuery({ query: '(max-width: 560px)'})

  return (
    <div>
      <h1>テストです</h1>
      {isMobileScreen && (
        <p>スマホ画面で表示される</p>
      )}
    </div>
  );
}
export default Index;

かなり便利ですよね。
↓hookできるので他にもreturnする内容も変えることができます。↓

import React from "react"
import { useMediaQuery } from "react-response"

const Index = () => {
  const isMobileScreen: boolean = useMediaQuery({ query: '(max-width: 560px)'})

  if (isMobileScreen) {
    return (
      <div>
        <h1>スマホ画面です。</h1>
      </div>
    );
  } else {
    return (
      <div>
        <h1>PC画面です。</h1>
      </div>
    );
  }
}
export default Index;

しかし、この書き方で注意しなければいけないのは、returnを制御しているため、一度レンダリングが走ったのち、デバイスのwidthが変更になっても、再びリロードしてレンダリングさせないとそのままだということです。

いづれにしろ、これでcssを見なくてもどの時、何が表示されるのか見やすくなりました。

もっと知りたい

react-responsiveは他にもコンポーネントで囲む物などがあって、便利なのでチェックしてみてください。