Navigate back to the homepage

How to get browser details in react

Infinitbility
React
July 20th, 2021 · 1 min read
How to get browser details in react

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
1npm i --save platform
  • Install platform using yarn
1yarn 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.

1import platform from 'platform';

Browser name example

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

1import platform from 'platform';
2
3
4platform.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'

1import platform from 'platform';
2
3platform.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'

1import platform from 'platform';
2
3platform.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.

1import platform from 'platform';
2
3platform.os.architecture;
4platform.os.family;
5platform.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.

1import platform from 'platform';
2
3platform.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

Subscribe Our Newsletter You will get monthly free programming book

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Subscribe Our Newsletter You will get monthly free programming book

Tutorials

React Native

Categories

More articles from Infinitbility

React Native Validation Example

React Native Validation Example

how to do validation in react native

July 11th, 2021 · 1 min read
React Native Regex

React Native Regex

How to use regex in react native

July 10th, 2021 · 1 min read
© 2020–2021 Infinitbility
Disclaimer
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]