npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@wezom/browserizr

v9.0.0

Published

Detects your browser, device and platform

Downloads

817

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

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


Contributing

Please fill free to create issues or send PR

Licence

BSD-3-Clause License