【React】デバイスの判定をする方法を紹介【react-device-detect】

実装手順

非常に簡単です。

パッケージのインストール

TypeScriptを使用している場合は、--save-dev オプションをつけてインストールを行います。

npm install react-device-detect --save-dev

コードの実装

例として、Androidの場合は「これはAndroidです。」、iOSの場合は「これはiOSです。」、それ以外の場合は「モバイル端末ではありません。」と表示するコードを書いてみます。

import { isAndroid, isIOS } from 'react-device-detect';

export default const Example = () => {
    if (isAndroid) {
        return <p>これはAndroidです。</p>;
    } else if (isIOS) {
        return <p>これはiOSです。</p>;
    } else {
        return <p>モバイル端末ではありません。</p>;
    }
};

この例では isAndroid と isIOS を使用していますが、他にも多くの関数が用意されています。詳しくは次のリンクをご覧ください：react-device-detect

最後に

ここまで、ユーザーのデバイスを判定して、端末ごとに表示を切り替える方法について紹介しました。

たった数行で実装できるということを知らなかったので、感動しました。

必要な場面があれば、ぜひ実装してみてくださいね。

ここまでお読みいただき、ありがとうございました。