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.