react-device-detectでPC/モバイル判定を行う

公開日時

react-device-detectを使うと手軽にPC/モバイルの判定ができる。

  • インストール
yarn add react-device-detect
  • 使い方

isMobile を使うとモバイル判定ができる

import { isMobile } from "react-device-detect"

export const Some = () => {
  return (
    <>
      <p>some content</p>

      {isMobile ? (
        <p>this is mobile only content</p>
      ) : (
        <p>this is pc only content</p>
      )}
    </>
  )
}

BrowserView, MobileView を使うとPC, モバイルの場合のみchildrenのコンポーネントを表示することもできる。

import { BrowserView, MobileView } from "react-device-detect"

export const Some = () => {
  return (
    <>
      <p>some content</p>

      <MobileView>
        <p>this is mobile only content</p>
      </MobileView>

      <BrowserView>
        <p>this is pc only content</p>
      </BrowserView>
    </>
  )
}

Related #next.js

FigmaでSVG Octocatを作る その3

アウトライン化大事

_this.auth.addAuthTokenListener is not a function

8.6.5にダウングレードした

Next.jsのPreview Mode時はAnalyticsを無効化する

cookieの__next_preview_dataキーで判定

PWAアプリにクイックショートカットを追加する

manifest.jsonにshortcutsを追加