How to Detect Internet Explorer (or any Browser) With React and Display a Message to Visitors

Learn how to use a React library to auto-detect your site visitors’ browser and display a message accordingly.

Click here to skip to the React part.

One of my clients recently had a rare visitor from Internet Explorer 11, which according to our analytics happens around 0.2% of the time.

Unfortunately, Internet Explorer 11 doesn’t fully support flexbox (a CSS layout property), which means that depending on how you use flexbox, IE11 users may have a suboptimal experience.

Depending on what type of website and target audience you have, this type of issue could lead to different solutions:

• You could provide backward compatibility with some type of graceful fallback/polyfill that shows a different layout for users with old browsers. This could take anything from 5 minutes to 5 hours, or more work, depending on how much of your website is relying on modern browser technology.
• You could also use this as an opportunity to let your visitors know that they’re doing themselves a disservice by using outdated browser technologies and instead encourage them to use one of the many modern alternatives.

Let context guide your decisions on that one.

We decided to for the 2nd option, since the percentage of our visitors that use IE11 is so tiny, and my client doesn’t provide any acute medical services (if they did, I would go for the 1st option, of course).

Install React device detection library

After a bit of digging, I found a decent React library called react-device-detect by duskload on GitHub.

This library can’t detect a ton of different devices and render a view to your site visitors according to the detected device type — including all the mainstream browsers (Explorer, Edge, Chrome, Firefox, Opera, Safari).

You can use npm or yarn to install it (in the root of your React project):

npm install react-device-detect --save

or

yarn add react-device-detect

To use it, you need to import the specific feature that you want to use on your website. This library can do a lot, there’s no reason to load in more code than you need. Here’s a list of all react-device-detect’s features.

In my case, I wanted to detect all visitors to my client’s website that use Internet Explorer 11 and display a message that encourages them to switch to a modern browser.

To do that I used react-device-detect’s isIE selector inside my global layout wrapper (so this messages pops up on every page in the app):

import { isIE } from 'react-device-detect'

  if (isIE)
    return (
      <div>
        <h1>Hi there. You’re using an outdated browser</h1>
        <p>For a safer and faster user experience use a modern browser like Chrome, Firefox, Safari, Opera, or Edge.</p>
      </div>
    )
    return (
      <div>
      Your content for all non-IE users see goes here
      </div>
    )

For this specific use case, I also provided my client’s contact information so the odd IE11 visitor can still call them or write my client — they just can’t browse the entire website as every non-IE11 user can.

Surrounding the message we display for IE users, I carefully used my client’s colors, typography, and logo to enforce brand consistency and build trust.

Wrapping up

The goal is not to piss IE users off. The goal is to encourage our users to give themselves a better user experience by using a modern browser, which subsequently helps to advance web development for everyone.

The less time we developers have to spend on creating workarounds for completely outdated technologies of the past the more time we can spend on building better products for the future.

Moving forward, now that the big players (Microsoft, Google, Mozilla) have somewhat agreed on modern browser standards, we soon no longer have to spend nearly as much time worrying about browser incompatibility issues.

Remember that context matters. Sometimes you have to provide backward compatibility for 10+-year-old browsers — but for most use cases, you don’t.

Most Internet Explorer users only use that browser because it came with their Operating System. Many aren’t even aware that there are several superior alternatives that will give them a safer and faster experience — but if nobody tells them, why would they switch?