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>
    </>
  )
}