Hello Friends,

Welcome To Infinitbility!

Introduction

Sometimes, we need browser details like browser name, version, os, and etc to store on our database and write code based on browser details. today you will get how to get browser or device detail in react.

For get browser details, we are going to use Platform.js ( https://github.com/bestiejs/platform.js ) and check examples to get browser detail like name, version, and os.

Let’s start today topic How to get browser details in react programmatically

Installation

For installing platform.js we will need npm or yarn.

  • Install platform using npm
npm i --save platform
  • Install platform using yarn
yarn add platform

Usages

We are going to see how we can get browser detail using platform in react you can also use in your node project also.

before using platform we have to import platform library like below example.

import platform from 'platform';

Browser name example

We will get browser name using platform.name functionality like below example with possible output.

import platform from 'platform';


platform.name; // 'IE' ( your users browser name )
  • possible output of platform.name

“Chrome”, “Electron”, “Firefox”, “Firefox for iOS”, “IE”, “Microsoft Edge”, “PhantomJS”, “Safari”, “SeaMonkey”, “Silk”, “Opera Mini” and “Opera”

Mobile versions of some browsers have “Mobile” appended to their name: eg. “Chrome Mobile”, “Firefox Mobile”, “IE Mobile” and “Opera Mobile”

Browser version example

We will get browser version using platform.version functionality like below example with possible output.

it will simply return users browsers version details something like '10.0'

import platform from 'platform';

platform.version; // '10.0'

Browser device os example

We will get browser device os using platform.os functionality like below example with possible output.

it will simply return users browsers version details something like 'Windows Server 2008 R2 / 7 x64'

import platform from 'platform';

platform.os; // 'Windows Server 2008 R2 / 7 x64'

If you want seprate os detail with os architecture, device name ( family ), and in vserion use below syntax to done task.

import platform from 'platform';

platform.os.architecture;
platform.os.family;
platform.os.version;

platform.os.architecture will return architecture name and same for version also but platform.os.family will return all below possible output

“Windows”, “Windows Server 2008 R2 / 7”, “Windows Server 2008 / Vista”, “Windows XP”, “OS X”, “Linux”, “Ubuntu”, “Debian”, “Fedora”, “Red Hat”, “SuSE”, “Android”, “iOS” and “Windows Phone”

Browser device name example

we will get browser device name using platform.product functionality like below example with possible output.

import platform from 'platform';

platform.product; // 'iPad'
  • platform.product possible output

“BlackBerry”, “Galaxy S4”, “Lumia”, “iPad”, “iPod”, “iPhone”, “Kindle”, “Kindle Fire”, “Nexus”, “Nook”, “PlayBook”, “TouchPad” and “Transformer”

Wanna insterested in more details click on below Platform.js Documentation

Thanks for reading…