React & Next.js

How to Retrieve Browser and OS Information in React Applications

0

Web applications often benefit from knowing the user’s browser and operating system (OS) details. This information can optimize user experience and help address issues that arise in specific environments. In this article, we’ll explore how to use the `ua-parser-js` library to easily extract browser and OS information in a React application.

`ua-parser-js`

`ua-parser-js` is a JavaScript library that parses the user agent string to extract browser, OS, and device information. By using this library, you can simplify the analysis of complex user agent strings.

Installation and Basic Usage

First, install the `ua-parser-js` library using npm or yarn.

npm install ua-parser-js

Once installed, you can use the library in your React component. The example below shows a simple React component that extracts and displays the user’s browser and OS information.

import React, { useEffect, useState } from 'react';
import UAParser from 'ua-parser-js';

const App = () => {
  const [browser, setBrowser] = useState({});
  const [os, setOs] = useState({});

  useEffect(() => {
    const parser = new UAParser();
    const uaResult = parser.getResult();

    setBrowser(uaResult.browser);
    setOs(uaResult.os);
  }, []);

  return (
    <div>
      <h1>Browser Information</h1>
      <p>Name: {browser.name}</p>
      <p>Version: {browser.version}</p>

      <h1>Operating System Information</h1>
      <p>Name: {os.name}</p>
      <p>Version: {os.version}</p>
    </div>
  );
};

export default App;

Code Explanation

In the code above, we create a `UAParser` object and call the `getResult()` method to retrieve the user agent information. The `useEffect` hook is used to set the user information when the component is first rendered.

  • `setBrowser`: Sets the browser information as a state.
  • `setOs`: Sets the OS information as a state.

Detecting Dark Mode and Language Settings

Understanding the user’s environment also involves detecting dark mode and language settings.

Dark Mode Detection

To detect the user’s dark mode setting, use `window.matchMedia`.

import React, { useEffect, useState } from 'react';

const App = () => {
  const [isDarkMode, setIsDarkMode] = useState(false);

  useEffect(() => {
    const matchMedia = window.matchMedia('(prefers-color-scheme: dark)');
    setIsDarkMode(matchMedia.matches);

    const handler = (e) => setIsDarkMode(e.matches);
    matchMedia.addListener(handler);

    return () => matchMedia.removeListener(handler);
  }, []);

  return (
    <div style={{ background: isDarkMode ? '#333' : '#fff', color: isDarkMode ? '#fff' : '#000' }}>
      <h1>{isDarkMode ? 'Dark Mode' : 'Light Mode'}</h1>
    </div>
  );
};

export default App;

Detecting User Language Settings

You can obtain the user’s language setting using the `navigator.language` property.

import React, { useEffect, useState } from 'react';

const App = () => {
  const [language, setLanguage] = useState('');

  useEffect(() => {
    setLanguage(navigator.language || navigator.userLanguage);
  }, []);

  return (
    <div>
      <h1>Your language is: {language}</h1>
    </div>
  );
};

export default App;

Combining Features

You can combine dark mode and language detection to better control the user’s environment.

import React, { useEffect, useState } from 'react';
import UAParser from 'ua-parser-js';

const App = () => {
  const [browser, setBrowser] = useState({});
  const [os, setOs] = useState({});
  const [isDarkMode, setIsDarkMode] = useState(false);
  const [language, setLanguage] = useState('');

  useEffect(() => {
    const parser = new UAParser();
    const uaResult = parser.getResult();

    setBrowser(uaResult.browser);
    setOs(uaResult.os);

    const matchMedia = window.matchMedia('(prefers-color-scheme: dark)');
    setIsDarkMode(matchMedia.matches);

    const handler = (e) => setIsDarkMode(e.matches);
    matchMedia.addListener(handler);

    setLanguage(navigator.language || navigator.userLanguage);

    return () => matchMedia.removeListener(handler);
  }, []);

  return (
    <div style={{ background: isDarkMode ? '#333' : '#fff', color: isDarkMode ? '#fff' : '#000' }}>
      <h1>Browser Information</h1>
      <p>Name: {browser.name}</p>
      <p>Version: {browser.version}</p>

      <h1>Operating System Information</h1>
      <p>Name: {os.name}</p>
      <p>Version: {os.version}</p>

      <h1>{isDarkMode ? 'Dark Mode' : 'Light Mode'}</h1>
      <h2>Your language is: {language}</h2>
    </div>
  );
};

export default App;

Conclusion

Using the `ua-parser-js` library makes it easy to extract browser and OS information. Additionally, detecting dark mode and language settings can enhance user experience. Leverage these features to build optimized web applications tailored to the user’s environment.

Leave a Reply