Have ideas to improve npm?Join in the discussion! »

    @wezom/browserizr
    TypeScript icon, indicating that this package has built-in type declarations

    9.0.0 • Public • Published

    @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


    Install

    npm i @wezom/browserizr

    DownloadsWeekly Downloads

    87

    Version

    9.0.0

    License

    BSD-3-Clause

    Unpacked Size

    64.9 kB

    Total Files

    131

    Last publish

    Collaborators

    • avatar