My logic is to hide the React content in root
if the browser is Edge/IE and show the unsupportedBrowser
content to let the user know that this browser is not supported.
Note this only doesn't work properly in IE. Works fine in Edge.
<html>
<body>
<div id="root">React Content</div>
<div id="unsupportedBrowser" style="display: none;">
Internet Explorer & Microsoft Edge is NOT supported.
</div>
<script type="text/javascript" defer>
document.addEventListener("DOMContentLoaded", function(){
if (window.document.documentMode || window.navigator.userAgent.indexOf("Edge") > -1) {
alert("Edge browser");
document.getElementById("root").style.display = "none";
document.getElementById("unsupportedBrowser").classList.add("unsupported");
// do other things
};
});
</script>
</body>
</html>
// CSS
.unsupported {
display: block !important;
text-align: center;
font-size: 20px;
font-weight: bold;
margin-top: 45vh;
}