Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What is going on with this article?
@YusukeTagawa

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

背景

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

4
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
4
Help us understand the problem. What is going on with this article?