How do I use a utility function to detect OS and Browser in react?

Question

I'm attempting to use a utility function in order to detect the browser and the operating system on the login page in a react app. Here is the method that I'm attempting to export into the Login component:

//utils/platform.js

function getOperatingSystem(window) {
  let operatingSystem = 'Not known';
  if (window.navigator.appVersion.indexOf('Win') !== -1) { operatingSystem = 'Windows OS'; }
  if (window.navigator.appVersion.indexOf('Mac') !== -1) { operatingSystem = 'MacOS'; }
  if (window.navigator.appVersion.indexOf('X11') !== -1) { operatingSystem = 'UNIX OS'; }
  if (window.navigator.appVersion.indexOf('Linux') !== -1) { operatingSystem = 'Linux OS'; }

  return operatingSystem;
}

function getBrowser(window) {
  let currentBrowser = 'Not known';
  if (window.navigator.userAgent.indexOf('Chrome') !== -1) { currentBrowser = 'Google Chrome'; }
  else if (window.navigator.userAgent.indexOf('Firefox') !== -1) { currentBrowser = 'Mozilla Firefox'; }
  else if (window.navigator.userAgent.indexOf('MSIE') !== -1) { currentBrowser = 'Internet Exployer'; }
  else if (window.navigator.userAgent.indexOf('Edge') !== -1) { currentBrowser = 'Edge'; }
  else if (window.navigator.userAgent.indexOf('Safari') !== -1) { currentBrowser = 'Safari'; }
  else if (window.navigator.userAgent.indexOf('Opera') !== -1) { currentBrowser = 'Opera'; }
  else if (window.navigator.userAgent.indexOf('Opera') !== -1) { currentBrowser = 'YaBrowser'; }
  else { console.log('Others'); }

  return currentBrowser;
}

export const OS = (window) => { getOperatingSystem(window); };
export const currentBrowser = (window) => { getBrowser(window); };

The window object isn't available in the platform.js file so I'm attempting to add as an argument in the Login file. Here is the login file below:

import { OS, currentBrowser } from '../../../utils/platform';

class Login extends BasePage {
  constructor(props) {
    super(props);
    this.state = {
      email: '',
      password: '',
      OS: '',
      browser: '',
    };
  }

componentDidMount() {
    this.checkNoSession();
    super.componentDidMount();
    console.log(OS(window));
    console.log(currentBrowser(window));
  }

Ultimately I'd like to set the state of OS and browser to be the value returned by the imported methods. However currently when I'm console logging these I'm receiving 'undefined'.

Answer 1

It's because your functions are not returning anything.

export const OS = (window) => { 
  return getOperatingSystem(window); // <-- missing return
};
export const currentBrowser = (window) => { 
  return getBrowser(window); // <-- missing return
};

or you could implicitly return by dropping {}

export const OS = (window) => getOperatingSystem(window);
export const currentBrowser = (window) => getBrowser(window);

But if you do that you don't need the wrapper function at all

export const OS = getOperatingSystem;
export const currentBrowser = getBrowser

And when you write it like that you might ask yourself why not just export the original functions

export function getOperatingSystem (window) { ... }
export function getBrowser (window) { ... }

Answer 2

You can use navigator object

Example:

getOs = () => {
   const os = ['Windows', 'Linux', 'Mac']; // add your OS values
   return os.find(v=>navigator.appVersion.indexOf(v) >= 0);
}

Answer 3

For TypeScript I had to use modified version of Zouari answer:

const getOs = () => {
const os = ['Windows', 'Mac']; // add your OS values
return os.find(v => ((global as any).window?.navigator.platform.indexOf(v) >= 0));

}