How to Get Browser Details in React JS?

Sep 26, 2022 . Admin

Hi Friends,

This tutorial is focused on how to get browser details in react js. This example will help you how to get browser name in react js. I explained simply about react js get browser name. I would like to show you react js get browser details.

Sometimes, we need to get browser name, version, layout etc in react js app. Then i will help you how to get browser details in react js. we will use "platform" npm package to get browser name in react js app.

So, let's see follow the below step to create simple example.

Step 1: Create React JS App

In this step, open your terminal and execute the following command on your terminal to create a new react app:

npx create-react-app react-app-example

Step 2: Install platform npm Package

In this step, we need to install platform npm package to use their functions. let's run below command:

npm install platform

Step 3: Update App.js Component

Here, we will display browser name, version and layout using platform. let's put the below code on it.

src/App.js

import './App.css';
import platform from 'platform';

function App() {

  return (
    <div className="App">
      <h1>How to Get Browser Details in React JS? - MyWebtuts.com</h1>
      <h2>Your Browser Details is: </h2>
      <h4>Name: {platform.name}</h4>
      <h4>Version: {platform.version}</h4>
      <h4>Layout: {platform.layout}</h4>
    </div>
  );
}

export default App;

Step 4: Run React JS App

In the last step run your project using bellow command.