Can I render warning message if user's browser is not supported?

Question

I am working on a react application and customers want it to show a special message if user\'s old browser does not support (e.g. IE 9).

So

Answer 1

Well what you can do is, you have to check the browser version, like in my case I was dealing with the Internet Explorer Version older than 11. So detect the browser. There is no need to add an extra package, just few lines of code and then make two ReactDOm.renders, one for Success/Supported and the other for Unsupported Version.

Here is how I did it, maybe that will help you:

// get the Version of Browser, older than '11'
const getIEVersion = () => {
  const ua = window.navigator.userAgent;
  const msie = ua.indexOf('MSIE ');
  if (msie > 0) {
    // IE 10 or older => return version number
    return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
  }
  const trident = ua.indexOf('Trident/');
  if (trident > 0) {
    // IE 11 => return version number
    const rv = ua.indexOf('rv:');
    return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
  }
  const edge = ua.indexOf('Edge/');
  if (edge > 0) {
    // Edge (IE 12+) => return version number
    return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
  }
  // other browser
  return false;
};

// Method for Rendering of Unsupported Version
const UnsupportedBrowserPage = () => (
  

    
Test Page For Versions lower then 11 on IE
  
);


const iEVersion = getIEVersion();

if (iEVersion && iEVersion < 11) {

ReactDOM.render(, document.getElementById('root'));

} else {
  ReactDOM.render(
    , document.getElementById('root')
  );
}