Introduction to React Device Detect

According to  StatCounter.com, almost 65% of users are using Google Chrome as their browser. I am also one of them.

However, this also means that 35% of users are not using Google Chrome. When developing you should always try to be aware of as many users as possible.

There are some features that will work well on one browser, but if you switch over to another, things will not work the way we expected. There is a handy website below called,  caniuse.com, which checks whether a feature will work on a browser or not.

I recently found that a feature I added to one of my React projects was not compatible with IE11. Adding the feature to be IE11 compatible was going to take a lot of additional work. Instead, I decided to disable the feature if the user is on IE11. I wanted to find a simple way to see what browser my user was using.

In this article, we will take a look at a package called react-device-detect, which can accomplish this and so much more.

Getting started

Before we jump into the react-device-detect library, let’s take a look at how we would do this without any third-party packages.

You can install it using npm or yarn.

1. npm install react-device-detect --save. or. yarn add react-device-detect.
2. import { browserName, browserVersion } from “react-device-detect”;
3. console. log(${browserName} ${browserVersion});

#javascript #browsers #react #google-chrome #programming