@wezom/browserizr
Coverage
Statements | Branches | Functions | Lines |
---|---|---|---|
Features
Table of Content:
- Usage
- API
-
Built-in detects
-
Browsers
- isChrome
- isChromeVersion
- isChromeAndroid
- isChromeAndroidVersion
- isChromeIOS
- isChromeIOSVersion
- isChromiumBased
- isChromiumBasedVersion
- isEdge
- isEdgeVersion
- isEdgeAndroid
- isEdgeAndroidVersion
- isEdgeIOS
- isEdgeIOSVersion
- isFirefox
- isFirefoxVersion
- isFirefoxAndroid
- isFirefoxAndroidVersion
- isFirefoxIOS
- isFirefoxIOSVersion
- isIE
- isIEVersion
- isOpera
- isOperaVersion
- isSafari
- isSafariVersion
- isSafariIOS
- isSafariIOSVersion
- isVivaldi
- isVivaldiVersion
- isYandex
- isYandexVersion
- Devices
- OS
-
Browsers
- Custom detects
- Contributing
- License
Usage
ESNext distribution version
We use TypeScript as main development language and distribute our lib in the maximum compliance with modern JavaScript specifications.
Your project bundler (webpack or something else) should not exclude this installed package from node_modules
folder for the transpilation process.
The package babel-loader-exclude-node-modules-except
can help you with this
CommonJS distribution version
If you cannot change your bundler config or if you do not want to include ESNext code version into your project - for this we have compiled CommonJS distribution version.
You can install @wezom/browserizr-cjs
instead of the current package.
Install the chosen npm package
# esnext version
npm i @wezom/browserizr
# or commonjs
npm i @wezom/browserizr-cjs
Usage example
import browserizr, { isIE, isChromeVersion, MORE_THEN_OR_EQUAL } from '@wezom/browserizr';
// Detect Internet Explorer
if (browserizr.detect(isIE)) {
// your code ...
}
// Detect Google Chrome 87+
const isChrome87orHigher = isChromeVersion(87, MORE_THEN_OR_EQUAL);
if (browserizr.detect(isChrome87orHigher)) {
// your code ...
}
API
Methods
browserizr.detect()
Signature:
/** Detection by given function */
detect(fn: (ua: string) => boolean): boolen
Parameters:
Name | Data type | Description |
---|---|---|
fn |
function |
Function that will accept string argument userAgent and must return boolean result of detect |
Return type: boolean
You can use one of the built-in methods or write custom detects
import browserizr, { isChrome, isMobile } from '@wezom/browserizr';
if (browserizr.detect(isChrome)) {
console.log('Yeah! Thats Chrome!');
}
if (browserizr.detect(isMobile)) {
console.log('Yeah! Thats is Mobile device');
}
browserizr.classNames()
Signature:
/** Generate CSS class names string */
classNames(
classes: {
is: string;
not: string;
fn: DetectMethod;
}[]
): string[]
Parameters:
Name | Data type | Description |
---|---|---|
classes |
Array |
Array of options |
classes[N] |
Object |
Options for generating class name |
classes[N].is |
string |
Class name for positive detects result |
classes[N].not |
string |
Class name for negative detects result |
classes[N].fn |
function |
Function for detect method, see browserizr.detect() |
Return type: string[]
A little example for the explanation:
import browserizr, { DetectClassNameMethod, isSafari, isMobile } from '@wezom/browserizr';
const classes: DetectClassNameMethod[] = [
{
is: 'is-mobile-device', // You can use
not: 'not-like-mobile', // your own class names like you want
fn: isMobile
},
{
is: 'is-safari',
not: 'is-not-safari',
fn: isSafari
}
];
// if mobile Safari browser
console.log(browserizr.classNames(classes)); // => ['is-mobile-device', 'is-safari']
// if mobile but not Safari browser
console.log(browserizr.classNames(classes)); // => ['is-mobile-device', 'is-not-safari']
// if not mobile and not Safari browser
console.log(browserizr.classNames(classes)); // => ['not-like-mobile', 'is-not-safari']
You can do what you want with this array of strings. Like this:
// Add classes in browser
document.body.classList.add(...browserizr.classNames(classes));
// Render JSX components
<div className={browserizr.classNames(classes).join(' ')}>...</div>
browserizr.setUA()
Signature:
/** Set custom `userAgent` string */
setUA(ua: string): void
Parameters:
Name | Data type | Description |
---|---|---|
ua |
string |
Custom userAgent string |
Return type: undefined
By default, browserizr
trying to resolve global object navigator
and get userAgent
field from that.
Global object navigator
exist only in the browser environment.
So if you work in the another environment - you may use .setUA()
method to set custom string:
// working with express server on Node.js
browserizr.setUA(req.headers['user-agent']);
Also, method setUA
will help you with tests your own detection methods
browserizr.setUA('My custom userAgent string');
browserizr.detect(isMyCustomDetectMethod);
Built-in detects
We have prepared a list of commonly used detects:
Browsers
isChrome
Detect Google Chrome browser
import browserizr, { isChrome } from '@wezom/browserizr';
if (browserizr.detect(isChrome)) {
// code
}
isChromeVersion
Detect Google Chrome Browser version.
import browserizr, {
isChromeVersion,
MORE_THEN_OR_EQUAL,
EQUAL,
LESS_THEN_OR_EQUAL
} from '@wezom/browserizr';
const chrome86 = isChromeVersion(EQUAL, 86);
const chrome86orHigher = isChromeVersion(MORE_THEN_OR_EQUAL, 86);
const chrome86orLater = isChromeVersion(LESS_THEN_OR_EQUAL, 86);
if (browserizr.detect(chrome86orHigher)) {
// code
}
// ...
isChromeAndroid
Detect Google Chrome Android Browser
import browserizr, { isChromeAndroid } from '@wezom/browserizr';
if (browserizr.detect(isChromeAndroid)) {
// code
}
isChromeAndroidVersion
Detect Google Chrome Android Browser version.
import browserizr, {
isChromeAndroidVersion,
MORE_THEN_OR_EQUAL,
EQUAL,
LESS_THEN_OR_EQUAL
} from '@wezom/browserizr';
const chromeAndroid86 = isChromeAndroidVersion(EQUAL, 86);
const chromeAndroid86orHigher = isChromeAndroidVersion(MORE_THEN_OR_EQUAL, 86);
const chromeAndroid86orLater = isChromeAndroidVersion(LESS_THEN_OR_EQUAL, 86);
if (browserizr.detect(chromeAndroid86orHigher)) {
// code
}
// ...
isChromeIOS
Detect Google Chrome iOS Browser.
import browserizr, { isChromeIOS } from '@wezom/browserizr';
if (browserizr.detect(isChromeIOS)) {
// code
}
isChromeIOSVersion
Detect Google Chrome iOS Browser version.
import browserizr, {
isChromeIOSVersion,
MORE_THEN_OR_EQUAL,
EQUAL,
LESS_THEN_OR_EQUAL
} from '@wezom/browserizr';
const chromeIOS86 = isChromeIOSVersion(EQUAL, 86);
const chromeIOS86orHigher = isChromeIOSVersion(MORE_THEN_OR_EQUAL, 86);
const chromeIOS86orLater = isChromeIOSVersion(LESS_THEN_OR_EQUAL, 86);
if (browserizr.detect(chromeIOS86orHigher)) {
// code
}
// ...
isChromiumBased
Detect Chromium-based Browser.
import browserizr, { isChromiumBased } from '@wezom/browserizr';
if (browserizr.detect(isChromiumBased)) {
// code
}
isChromiumBasedVersion
Detect Chromium-based Browser version.
import browserizr, {
isChromiumBasedVersion,
MORE_THEN_OR_EQUAL,
EQUAL,
LESS_THEN_OR_EQUAL
} from '@wezom/browserizr';
const chromiumBased86 = isChromiumBasedVersion(EQUAL, 86);
const chromiumBased86orHigher = isChromiumBasedVersion(MORE_THEN_OR_EQUAL, 86);
const chromiumBased86orLater = isChromiumBasedVersion(LESS_THEN_OR_EQUAL, 86);
if (browserizr.detect(chromiumBased86)) {
// code
}
// ...
isEdge
Detect Microsoft Edge browser.
import browserizr, { isEdge } from '@wezom/browserizr';
if (browserizr.detect(isEdge)) {
// code
}
isEdgeVersion
Detect Microsoft Edge browser and wanted version.
import browserizr, {
isEdgeVersion,
MORE_THEN_OR_EQUAL,
EQUAL,
LESS_THEN_OR_EQUAL
} from '@wezom/browserizr';
const edge86 = isEdgeVersion(EQUAL, 86);
const edge86orHigher = isEdgeVersion(MORE_THEN_OR_EQUAL, 86);
const edge86orLater = isEdgeVersion(LESS_THEN_OR_EQUAL, 86);
if (browserizr.detect(edge86orHigher)) {
// code
}
// ...
isEdgeAndroid
Detect Microsoft Edge Android Browser.
import browserizr, { isEdgeAndroid } from '@wezom/browserizr';
if (browserizr.detect(isEdgeAndroid)) {
// code
}
isEdgeAndroidVersion
Detect Microsoft Edge Android Browser version.
import browserizr, {
isEdgeAndroidVersion,
MORE_THEN_OR_EQUAL,
EQUAL,
LESS_THEN_OR_EQUAL
} from '@wezom/browserizr';
const edgeAndroid45 = isEdgeAndroidVersion(EQUAL, 45);
const edgeAndroid45orHigher = isEdgeAndroidVersion(MORE_THEN_OR_EQUAL, 45);
const edgeAndroid45orLater = isEdgeAndroidVersion(LESS_THEN_OR_EQUAL, 45);
if (browserizr.detect(edgeAndroid45orHigher)) {
// code
}
// ...
isEdgeIOS
Detect Microsoft Edge iOS Browser.
import browserizr, { isEdgeIOS } from '@wezom/browserizr';
if (browserizr.detect(isEdgeIOS)) {
// code
}
isEdgeIOSVersion
Detect Microsoft Edge iOS Browser version.
import browserizr, {
isEdgeIOSVersion,
MORE_THEN_OR_EQUAL,
EQUAL,
LESS_THEN_OR_EQUAL
} from '@wezom/browserizr';
const edgeIOS45 = isEdgeIOSVersion(EQUAL, 45);
const edgeIOS45orHigher = isEdgeIOSVersion(MORE_THEN_OR_EQUAL, 45);
const edgeIOS45orLater = isEdgeIOSVersion(LESS_THEN_OR_EQUAL, 45);
if (browserizr.detect(edgeIOS45orHigher)) {
// code
}
// ...
isFirefox
Detect Mozilla Firefox Browser.
import browserizr, { isFirefox } from '@wezom/browserizr';
if (browserizr.detect(isFirefox)) {
// code
}
isFirefoxVersion
Detect Mozilla Firefox Browser and wanted version.
import browserizr, {
isFirefoxVersion,
MORE_THEN_OR_EQUAL,
EQUAL,
LESS_THEN_OR_EQUAL
} from '@wezom/browserizr';
const ffx83 = isFirefoxVersion(EQUAL, 83);
const ffx83orHigher = isFirefoxVersion(MORE_THEN_OR_EQUAL, 83);
const ffx83orLater = isFirefoxVersion(LESS_THEN_OR_EQUAL, 83);
if (browserizr.detect(ffx83)) {
// code
}
// ...
isFirefoxAndroid
Detect Mozilla Firefox Android Browser.
import browserizr, { isFirefoxAndroid } from '@wezom/browserizr';
if (browserizr.detect(isFirefoxAndroid)) {
// code
}
isFirefoxAndroidVersion
Detect Mozilla Firefox Android Browser version.
import browserizr, {
isFirefoxAndroidVersion,
MORE_THEN_OR_EQUAL,
EQUAL,
LESS_THEN_OR_EQUAL
} from '@wezom/browserizr';
const ffxAndroid83 = isFirefoxAndroidVersion(EQUAL, 83);
const ffxAndroid83orHigher = isFirefoxAndroidVersion(MORE_THEN_OR_EQUAL, 83);
const ffxAndroid83orLater = isFirefoxAndroidVersion(LESS_THEN_OR_EQUAL, 83);
if (browserizr.detect(ffx83Android)) {
// code
}
// ...
isFirefoxIOS
Detect Mozilla Firefox iOS Browser.
import browserizr, { isFirefoxIOS } from '@wezom/browserizr';
if (browserizr.detect(isFirefoxIOS)) {
// code
}
isFirefoxIOSVersion
Detect Mozilla Firefox iOS Browser version.
import browserizr, {
isFirefoxIOSVersion,
MORE_THEN_OR_EQUAL,
EQUAL,
LESS_THEN_OR_EQUAL
} from '@wezom/browserizr';
const ffxIOS29 = isFirefoxIOSVersion(EQUAL, 29);
const ffxIOS29orHigher = isFirefoxIOSVersion(MORE_THEN_OR_EQUAL, 29);
const ffxIOS29orLater = isFirefoxIOSVersion(LESS_THEN_OR_EQUAL, 29);
if (browserizr.detect(ffx29IOS)) {
// code
}
// ...
isIE
Detect Internet Explorer browser.
import browserizr, { isIE } from '@wezom/browserizr';
if (browserizr.detect(isIE)) {
// code
}
isIEVersion
Detect Internet Explorer browser and wanted version.
import browserizr, { EQUAL } from '@wezom/browserizr';
import { isIEVersion } from '@wezom/browserizr';
const ie8 = isIEVersion(EQUAL, 8);
const ie9 = isIEVersion(EQUAL, 9);
const ie10 = isIEVersion(EQUAL, 10);
const ie11 = isIEVersion(EQUAL, 11);
if (browserizr.detect(ie8)) {
// code
}
// ...
isOpera
Detect Opera browser.
import browserizr, { isOpera } from '@wezom/browserizr';
if (browserizr.detect(isOpera)) {
// code
}
isOperaVersion
Detect Opera browser and wanted version.
import browserizr, {
isOperaVersion,
MORE_THEN_OR_EQUAL,
EQUAL,
LESS_THEN_OR_EQUAL
} from '@wezom/browserizr';
const opera60 = isOperaVersion(EQUAL, 60);
const opera60orHigher = isOperaVersion(MORE_THEN_OR_EQUAL, 60);
const opera60orLater = isOperaVersion(LESS_THEN_OR_EQUAL, 60);
if (browserizr.detect(opera60)) {
// code
}
// ...
isSafari
Detect Apple Safari browser.
import browserizr, { isSafari } from '@wezom/browserizr';
if (browserizr.detect(isSafari)) {
// code
}
isSafariVersion
Detect Apple Safari browser and wanted version.
import browserizr, {
isSafariVersion,
MORE_THEN_OR_EQUAL,
EQUAL,
LESS_THEN_OR_EQUAL
} from '@wezom/browserizr';
const safari14 = isSafariVersion(EQUAL, 14);
const safari14orHigher = isSafariVersion(MORE_THEN_OR_EQUAL, 14);
const safari14orLater = isSafariVersion(LESS_THEN_OR_EQUAL, 14);
if (browserizr.detect(safari14)) {
// code
}
// ...
isSafariIOS
Detect Apple Safari browser on iOS.
import browserizr, { isSafariIOS } from '@wezom/browserizr';
if (browserizr.detect(isSafariIOS)) {
// code
}
isSafariIOSVersion
Detect Apple Safari browser and wanted version on iOS.
import browserizr, {
isSafariIOSVersion,
MORE_THEN_OR_EQUAL,
EQUAL,
LESS_THEN_OR_EQUAL
} from '@wezom/browserizr';
const safarIOSi14 = isSafariIOSVersion(EQUAL, 14);
const safarIOSi14orHigher = isSafariIOSVersion(MORE_THEN_OR_EQUAL, 14);
const safarIOSi14orLater = isSafariIOSVersion(LESS_THEN_OR_EQUAL, 14);
if (browserizr.detect(safariIOS14)) {
// code
}
// ...
isVivaldi
Detect Vivaldi browser.
import browserizr, { isVivaldi } from '@wezom/browserizr';
if (browserizr.detect(isVivaldi)) {
// code
}
isVivaldiVersion
Detect Vivaldi browser and wanted version.
import browserizr, {
isVivaldiVersion,
MORE_THEN_OR_EQUAL,
EQUAL,
LESS_THEN_OR_EQUAL
} from '@wezom/browserizr';
const vivaldi3dot4 = isVivaldiVersion(EQUAL, 3.4);
const vivaldi3dot4orHigher = isVivaldiVersion(MORE_THEN_OR_EQUAL, 3.4);
const vivaldi3dot4orLater = isVivaldiVersion(LESS_THEN_OR_EQUAL, 3.5);
if (browserizr.detect(vivaldi3dot4)) {
// code
}
// ...
isYandex
Detect Yandex browser.
import browserizr, { isYandex } from '@wezom/browserizr';
if (browserizr.detect(isYandex)) {
// code
}
isYandexVersion
Detect Yandex browser and wanted version
import browserizr, {
isYandexVersion,
MORE_THEN_OR_EQUAL,
EQUAL,
LESS_THEN_OR_EQUAL
} from '@wezom/browserizr';
const yandex20 = isYandexVersion(EQUAL, 20);
const yandex20orHigher = isYandexVersion(MORE_THEN_OR_EQUAL, 20);
const yandex20orLater = isYandexVersion(LESS_THEN_OR_EQUAL, 20);
if (browserizr.detect(vivaldi3dot4)) {
// code
}
// ...
Devices
isDesktop
Detect desktop browser.
import browserizr, { isDesktop } from '@wezom/browserizr';
if (browserizr.detect(isDesktop)) {
// code
}
isMobile
Detect mobile browser.
import browserizr, { isMobile } from '@wezom/browserizr';
if (browserizr.detect(isMobile)) {
// code
}
isIPad
Detect the browser on iPad device.
import browserizr, { isIPad } from '@wezom/browserizr';
if (browserizr.detect(isIPad)) {
// code
}
isIPhone
Detect a browser on iPhone device.
import browserizr, { isIPhone } from '@wezom/browserizr';
if (browserizr.detect(isiPhone)) {
// code
}
isIPod
Detect a browser on iPod device.
import browserizr, { isIPod } from '@wezom/browserizr';
if (browserizr.detect(isIPod)) {
// code
}
OS
isAndroid
Detect Android OS.
import browserizr, { isAndroid } from '@wezom/browserizr';
if (browserizr.detect(isAndroid)) {
// code
}
isAndroidVersion
Detect Android and wanted OS version
import browserizr, {
isAndroidVersion,
MORE_THEN_OR_EQUAL,
EQUAL,
LESS_THEN_OR_EQUAL
} from '@wezom/browserizr';
const android11 = isAndroidVersion(EQUAL, 11);
const android9orHigher = isAndroidVersion(MORE_THAN_OR_EQUAL, 9);
if (browserizr.detect(android11)) {
// code
}
// ...
isIOS
Detect the iOS
import browserizr, { isIOS } from '@wezom/browserizr';
if (browserizr.detect(isIOS)) {
// code
}
isIOSVersion
Detect iOS and wanted OS version
import browserizr, {
isIOSVersion,
MORE_THEN_OR_EQUAL,
EQUAL,
LESS_THEN_OR_EQUAL
} from '@wezom/browserizr';
const iOS14 = isIOSVersion(EQUAL, 14);
const iOS11orHigher = isIOSVersion(MORE_THAN_OR_EQUAL, 11);
if (browserizr.detect(iOS14)) {
// code
}
// ...
isMacOS
Detect macOS.
import browserizr, { isMacOS } from '@wezom/browserizr';
if (browserizr.detect(isMacOS)) {
// code
}
isMacOSVersion
versions:
"Snow Leopard"
"Lion.Safari"
"Mountain Lion"
"Mavericks"
"Yosemite"
"El Capitan"
"Sierra"
"High Sierra"
"Mojave"
"Catalina"
"Big Sur"
Detect macOS and wanted OS version
import browserizr, {
isMacOSVersion,
MORE_THEN_OR_EQUAL,
EQUAL,
LESS_THEN_OR_EQUAL
} from '@wezom/browserizr';
const macOSCatalina = isMacOSVersion(MORE_THEN_OR_EQUAL, 'Catalina');
const macOSBigSur = isMacOSVersion(EQUAL, 'Big Sur');
const macOSHighSierra = isMacOSVersion(LESS_THEN_OR_EQUAL, 'High Sierra');
if (browserizr.detect(macOSCatalina)) {
// code
}
// ...
isWindows
Detect Windows OS.
import browserizr, { isWindows } from '@wezom/browserizr';
if (browserizr.detect(isWindows)) {
// code
}
isWindowsVersion
Detect Windows and wanted OS version
import browserizr, {
isWindowsVersion,
MORE_THEN_OR_EQUAL,
EQUAL,
LESS_THEN_OR_EQUAL
} from '@wezom/browserizr';
const windowXP = isWindowsVersion(EQUAL, 'XP');
const windowsVista = isWindowsVersion(EQUAL, 'Vista');
const window7 = isWindowsVersion(EQUAL, 7);
const window8 = isWindowsVersion(EQUAL, 8);
const window8dot1 = isWindowsVersion(EQUAL, 8.1);
const window10 = isWindowsVersion(EQUAL, 10);
if (browserizr.detect(windowXP)) {
// code
}
// ...
Custom detects
You can write your own methods to detect what you want in your own way.
Simple example
We need simple pure function that receive current userAgent string and must return boolean as detection result.
Let's assume, we need to detect some browser with name "My X Super Browser".
So we can expect that name-value like MXSBrowser
in userAgent string:
"Mozilla/5.0 (Macintosh; Intel Mac OS X 11_0_1) AppleWebKit/537.36 MXSBrowser/75.0.4280.66 Safari/537.36"
We can write regular expression for test this string and return result.
TypeScript example
// my-detects/is-mxs.ts
export default function isMXSBrowser(ua: string): boolean {
return /\sMXSBrowser\/[\d.]+\s/.test(ua);
}
// app.ts
import browserizr from '@wezom/browserizr';
import isMXSBrowser from 'my-detects/is-mxs';
if (browserizr.detect(isMXSBrowser)) {
console.log('Yeah! Thats it!');
}
Contributing
Please fill free to create issues or send PR