Browser Detection in ReactJS

Solution 1:

You are on the right track you can use these to conditionally render jsx or help with routing...

I have used the following with great success.

Originally from - How to detect Safari, Chrome, IE, Firefox and Opera browser?

// Opera 8.0+
const isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

// Firefox 1.0+
const isFirefox = typeof InstallTrigger !== 'undefined';

// Safari 3.0+ "[object HTMLElementConstructor]" 
const isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification));

// Internet Explorer 6-11
const isIE = /*@cc_on!@*/false || !!document.documentMode;

// Edge 20+
const isEdge = !isIE && !!window.StyleMedia;

// Chrome 1 - 71
const isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);

// Blink engine detection
const isBlink = (isChrome || isOpera) && !!window.CSS;

Please be aware they each stand a chance to deprecated due to browser changes.

I use them in React like this:

 content(props){
    if(!isChrome){
     return (
      <Otherjsxelements/>
     )
    }
    else { 
     return (
      <Chromejsxelements/>
     )
    }
  }

Then by calling {this.Content()} in my main component to render the different browser specific elements.

Pseudo code might look something like this... (untested):

import React from 'react';

const isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);

export default class Test extends React.Component {

  content(){
    if(isChrome){
        return (
            <div>Chrome</div>
        )
    } else {
        return (
            <div>Not Chrome</div>
        )
    }
  }

    render() {
        return (
            <div>Content to be seen on all browsers</div>
            {this.content()}
        )
    }
}

Solution 2:

Not sure why but nobody mentioned this package: react-device-detect The package have a lot browsers checks, plus versions and some other info related. It's really small and it's updated.

You can use:

import { isIE } from 'react-device-detect';
isIE // returns true or false

react-device-detect it's also very small bundlephobia link

Solution 3:

This is the service I always use when doing JS/Browser based browser-detection: http://is.js.org/

if (is.ie() || is.edge()) {
  window.location.href = 'http://example.com';
}

Solution 4:

Try:

const isEdge = window.navigator.userAgent.indexOf('Edge') != -1
const isIE = window.navigator.userAgent.indexOf('Trident') != -1 && !isEdge

etc.

Each browser has a distinct user agent you can check.

These can be faked by the client of course, but in my opinion, are a more reliable long term solution.