@wezom/browserizr

Detects your browser, device and platform

Usage no npm install needed!

<script type="module">
  import wezomBrowserizr from 'https://cdn.skypack.dev/@wezom/browserizr';
</script>

README

@wezom/browserizr

types BSD-3-Clause License badge NPM package badge All packages build All packages test

Coverage

Statements Branches Functions Lines
Statements Branches Functions Lines

Features

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


Table of Content:

  1. Usage
  2. API
    1. Methods
  3. Built-in detects
    1. Browsers
    2. Devices
    3. OS
  4. Custom detects
    1. Simple example
  5. Contributing
  6. 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 ...
}

â–² 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

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

â–² Go Top | â–² Table of Content


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
}

â–² Go Top | â–² Table of Content


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

â–² 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


Contributing

Please fill free to create issues or send PR

Licence

BSD-3-Clause License