@wezom/browserizr NPM

@wezom/browserizr

Coverage

Statements	Branches	Functions	Lines

Features

🌟 Fully treeshackable
🌟 Types included
🌟 ESNext distribute
🌟 CommonJS version available
🌟 SSR support
🌟 Custom detects available

Table of Content:

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 ...
}

▲ Go Top | ▲ Table of Content

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);

▲ Go Top | ▲ Table of Content

Built-in detects

We have prepared a list of commonly used detects:

Browsers

isChrome

import browserizr, { isChrome } from '@wezom/browserizr';
if (browserizr.detect(isChrome)) {
	// code
}

isChromeVersion

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

import browserizr, { isChromeAndroid } from '@wezom/browserizr';
if (browserizr.detect(isChromeAndroid)) {
	// code
}

isChromeAndroidVersion

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

import browserizr, { isChromeIOS } from '@wezom/browserizr';
if (browserizr.detect(isChromeIOS)) {
	// code
}

isChromeIOSVersion

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

import browserizr, { isChromiumBased } from '@wezom/browserizr';
if (browserizr.detect(isChromiumBased)) {
	// code
}

isChromiumBasedVersion

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

import browserizr, { isEdge } from '@wezom/browserizr';
if (browserizr.detect(isEdge)) {
	// code
}

isEdgeVersion

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

import browserizr, { isEdgeAndroid } from '@wezom/browserizr';
if (browserizr.detect(isEdgeAndroid)) {
	// code
}

isEdgeAndroidVersion

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

import browserizr, { isEdgeIOS } from '@wezom/browserizr';
if (browserizr.detect(isEdgeIOS)) {
	// code
}

isEdgeIOSVersion

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

import browserizr, { isFirefox } from '@wezom/browserizr';
if (browserizr.detect(isFirefox)) {
	// code
}

isFirefoxVersion

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

import browserizr, { isFirefoxAndroid } from '@wezom/browserizr';
if (browserizr.detect(isFirefoxAndroid)) {
	// code
}

isFirefoxAndroidVersion

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

import browserizr, { isFirefoxIOS } from '@wezom/browserizr';
if (browserizr.detect(isFirefoxIOS)) {
	// code
}

isFirefoxIOSVersion

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

import browserizr, { isIE } from '@wezom/browserizr';
if (browserizr.detect(isIE)) {
	// code
}

isIEVersion

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

import browserizr, { isOpera } from '@wezom/browserizr';
if (browserizr.detect(isOpera)) {
	// code
}

isOperaVersion

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

import browserizr, { isSafari } from '@wezom/browserizr';
if (browserizr.detect(isSafari)) {
	// code
}

isSafariVersion

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

import browserizr, { isSafariIOS } from '@wezom/browserizr';
if (browserizr.detect(isSafariIOS)) {
	// code
}

isSafariIOSVersion

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

import browserizr, { isVivaldi } from '@wezom/browserizr';
if (browserizr.detect(isVivaldi)) {
	// code
}

isVivaldiVersion

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

import browserizr, { isYandex } from '@wezom/browserizr';
if (browserizr.detect(isYandex)) {
	// code
}

isYandexVersion

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
}
// ...

▲ Go Top | ▲ Table of Content

Devices

isDesktop

import browserizr, { isDesktop } from '@wezom/browserizr';
if (browserizr.detect(isDesktop)) {
	// code
}

isMobile

import browserizr, { isMobile } from '@wezom/browserizr';
if (browserizr.detect(isMobile)) {
	// code
}

isIPad

import browserizr, { isIPad } from '@wezom/browserizr';
if (browserizr.detect(isIPad)) {
	// code
}

isIPhone

import browserizr, { isIPhone } from '@wezom/browserizr';
if (browserizr.detect(isiPhone)) {
	// code
}

isIPod

import browserizr, { isIPod } from '@wezom/browserizr';
if (browserizr.detect(isIPod)) {
	// code
}

▲ Go Top | ▲ Table of Content

OS

isAndroid

import browserizr, { isAndroid } from '@wezom/browserizr';
if (browserizr.detect(isAndroid)) {
	// code
}

isAndroidVersion

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

import browserizr, { isIOS } from '@wezom/browserizr';
if (browserizr.detect(isIOS)) {
	// code
}

isIOSVersion

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

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"

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

import browserizr, { isWindows } from '@wezom/browserizr';
if (browserizr.detect(isWindows)) {
	// code
}

isWindowsVersion

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
}
// ...

▲ Go Top | ▲ Table of Content

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!');
}

▲ Go Top | ▲ Table of Content