Введение в React Device Detect

По данным StatCounter.com, почти 65% пользователей используют Google Chrome в качестве браузера. Я тоже один из них.

Однако это также означает, что 35% пользователей не используют Google Chrome. При разработке вы всегда должны стараться знать как можно больше пользователей.

Некоторые функции будут хорошо работать в одном браузере, но если вы переключитесь на другой, все будет работать не так, как мы ожидали. Ниже есть удобный веб-сайт под названием caniuse.com, который проверяет, будет ли функция работать в браузере или нет.



Могу ли я использовать ... Таблицы поддержки HTML5, CSS3 и т. Д.
Тестирование функции Наше партнерство с BrowserStack теперь позволяет вам протестировать свой веб-сайт на совместимость с более чем 2000 реальных… caniuse.com



Недавно я обнаружил, что функция, которую я добавил в один из моих проектов React, несовместима с IE11. Добавление функции, совместимой с IE11, потребовало много дополнительной работы. Вместо этого я решил отключить эту функцию, если пользователь использует IE11. Я хотел найти простой способ узнать, какой браузер использует мой пользователь.

В этой статье мы рассмотрим пакет под названием response-device-detect, который может сделать это и многое другое.

Начиная

Прежде чем мы перейдем к библиотеке response-device-detect, давайте посмотрим, как бы мы это сделали без сторонних пакетов.

Согласно MDN Web Docs, мы можем обнаружить браузер пользователя с помощью API window.navigator. Но для меня пример кода, который они дают, немного сложен и запутан.

Более простой способ добиться этого - использовать пакет response-device-detect. Вы можете установить его, используя npm или yarn.

npm install react-device-detect --save

or

yarn add react-device-detect

Проверить название браузера

Использовать эту библиотеку просто. Мы можем импортировать ряд объектов. Например, чтобы получить имя и версию браузера, мы импортируем browserName и browserVersion из библиотеки.

import { browserName, browserVersion } from "react-device-detect";

Если мы зарегистрируем эти два значения в консоли, мы увидим следующее.

console.log(`${browserName} ${browserVersion}`);

Вот и все. Это действительно удобный пакет, которым очень легко пользоваться.

Вы также можете получить логическое значение, используя свойство is~. Например, вы можете использовать isChrome, isFirefox, isSafari, isIE и многие другие, чтобы вернуть истинное или ложное значение в зависимости от того, в каком браузере находится пользователь.

Другое использование

Помимо определения браузера пользователя, вы также можете определить имя и версию ОС с помощью osName и osVersion. Вы также можете проверить isWindows или isMacOs.

Еще одно хорошее применение этой библиотеки - проверить, на каком устройстве находится пользователь. Это может помочь вам сделать ваши приложения адаптивными. У них есть MobileView, BrowserView, TabletView и даже AndroidView и IOSView. В зависимости от того, на каком устройстве находится пользователь, вы можете выбрать, что отображать.

Подведение итогов

Спасибо за чтение! Это действительно хорошая библиотека, которая позволяет легко определить, какой браузер и операционную систему использует ваш пользователь. Вы также можете обнаруживать устройства, чтобы ваше приложение работало быстрее.

Хотя вы можете подумать, что все используют Google Chrome, это определенно не так. Поэтому важно помнить об этом при создании приложений.

Если вы хотите узнать о другой полезной библиотеке для React, ознакомьтесь со статьей ниже, чтобы узнать о React Icons.



Руководство по использованию значков React для новичков
Соберите все нужные значки в одном месте javascript.plainenglish.io