Ghazi KhanIn today's multi-device world, understanding the environment in which your users are interacting with your application is crucial. Whether you're a web developer optimizing your app for different browsers and operating systems or simply someone curious about the specs of your device, having access to detailed user agent information can be incredibly useful.
In this article, we'll walk through building a sleek and modern ReactJS app that detects and displays detailed information about the user's browser, OS, and device. Inspired by the design of modern weather apps, our tool will present this information in a dark-themed, user-friendly interface.
Why User Agent Detection Matters
User agent detection plays a vital role in web development. By identifying the user's browser, operating system, and device, developers can optimize content delivery, enhance performance, and ensure compatibility across different platforms. This is particularly important in a world where users access websites and apps on a variety of devices, from desktops and laptops to tablets and smartphones.
With our ReactJS app, you'll be able to easily access detailed user agent information, including:
- Browser: Name, version, major version, type
- Engine: Name, version
- Operating System: Name, version
- Device: Model, type, vendor
- CPU: Architecture
Let's dive into how we can build this app.
Video Tutorial: If you don't like to read
Setting Up the ReactJS Project
First, we'll start by setting up a new ReactJS project. If you haven't done so already, you can create a new project using Create React App:
npx create-react-app browser-info-app
cd browser-info-app
npm start
This will set up the basic scaffolding for your React app and start the development server. Now, let’s move on to installing the necessary libraries.
Installing the ua-parser-js Library
To parse user agent strings and extract detailed information, we'll use the ua-parser-js library. This lightweight library provides an easy-to-use API for extracting information about the browser, OS, device, and more.
Install ua-parser-js via npm:
npm install ua-parser-js
Next, let's create a utility function to use ua-parser-js in our app.
Creating the User Agent Detection Utility
Create a new file called userAgent.js in the src directory:
import UAParser from 'ua-parser-js';
export const getUserAgentDetails = () => {
const parser = new UAParser();
return {
browser: parser.getBrowser(),
engine: parser.getEngine(),
os: parser.getOS(),
device: parser.getDevice(),
cpu: parser.getCPU(),
};
};
This utility function returns an object containing all the relevant user agent details.
Building the User Interface
Next, we’ll create a modern, sleek UI to display this information. We’ll use a dark theme with card components to present the different categories of information.
Create a new component called UserAgentInfo.js:
import React, { useEffect, useState } from 'react';
import { getUserAgentDetails } from './userAgent';
import './UserAgentInfo.css';
const UserAgentInfo = () => {
const [details, setDetails] = useState({});
useEffect(() => {
const userDetails = getUserAgentDetails();
setDetails(userDetails);
}, []);
return (
<div className="user-agent-info">
<div className="info-card">
<h2>Browser</h2>
<p>Name: {details.browser.name}</p>
<p>Version: {details.browser.version}</p>
<p>Major: {details.browser.major}</p>
<p>Type: {details.browser.type || 'N/A'}</p>
</div>
<div className="info-card">
<h2>Engine</h2>
<p>Name: {details.engine.name}</p>
<p>Version: {details.engine.version}</p>
</div>
<div className="info-card">
<h2>Operating System</h2>
<p>Name: {details.os.name}</p>
<p>Version: {details.os.version}</p>
</div>
<div className="info-card">
<h2>Device</h2>
<p>Model: {details.device.model || 'N/A'}</p>
<p>Type: {details.device.type || 'N/A'}</p>
<p>Vendor: {details.device.vendor || 'N/A'}</p>
</div>
<div className="info-card">
<h2>CPU</h2>
<p>Architecture: {details.cpu.architecture}</p>
</div>
</div>
);
};
export default UserAgentInfo;
Styling the App
To complete the modern look, we need to style our components. Here’s some sample CSS to get you started:
.user-agent-info {
display: flex;
flex-direction: column;
gap: 20px;
padding: 20px;
background-color: #121212;
color: #ffffff;
font-family: 'Arial', sans-serif;
min-height: 100vh;
}
.info-card {
background-color: #1e1e1e;
border-radius: 10px;
padding: 15px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
.info-card h2 {
margin-top: 0;
color: #00adb5;
}
.info-card p {
margin: 5px 0;
}
This CSS gives the app a dark, modern aesthetic with smooth gradients and clear typography.
Running the App
With everything in place, your app should be ready to run. Open your browser and navigate to http://localhost:3000. You should see your new ReactJS app displaying detailed information about your browser, OS, device, and CPU.
Conclusion
In this tutorial, we've created a ReactJS app that detects and displays detailed browser and device information. The sleek, modern design mimics the layout of a weather app, providing users with easy-to-read, organized information.
This project not only highlights the importance of user agent detection in web development but also serves as a practical example of how to build a user-friendly interface using ReactJS.
Feel free to extend this project by adding more features or refining the UI further. Whether you're a developer needing detailed environment data or just someone curious about your device, this app is a great tool to have in your arsenal.
Happy coding!
Subscribe to Newsletter: https://codewithghazi.substack.com/
Follow me for more content like this:
LinkedIn: https://www.linkedin.com/in/ghazi-khan/
Twitter: https://twitter.com/ghazikhan205
Youtube: http://www.youtube.com/@codewithghazi
Instagram: https://www.instagram.com/codewithghazi/
