Browser Detection in ReactJS

Question

Is there any way to detect IE browser with React and either redirect to a page or give any helpful message. I found something in JavaScript, but not sure how would I use it with React+TypeScript.

var isEdge = !isIE && !!window.StyleMedia;

Answer 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()}         )     } }