device.js's Introduction

🧬 Device.js

Reactive library to observe essential browser and device properties.

⚠️ Version 2 is not backward compatible with version 1. Check the Changelog for more details.

✔️ Features detected

Browser name & version chrome, safari, firefox, facebook, instagram, edge, ie, opera, phantomjs
Browser features webp, webrtc, webgl, pwa
Device orientation portrait, landscape
Device type desktop, mobile, tablet, tv
Device OS android, ios, windows, macos
Viewport dimensions width, height

📦 Installation

yarn add @maoosi/device.js

🚀 Usage

Basic usage:

This code will log viewportWidth after every viewport resize, throttled to 200 ms:

import { device, watch } from '@maoosi/device.js'

watch(async() => {
    console.log(device.viewportWidth)
})

device is a reactive proxied object that can be observed and exposes the following properties:

interface device {
    deviceOS: string | null
    deviceType: string | null
    deviceOrientation: string | null
    browser: string | null
    browserVersion: string | null
    viewportHeight: number | null
    viewportWidth: number | null
    isBrowserEvergreen: boolean | null
    isPWA: boolean | null
    isSupportedWebP: boolean | null
    isSupportedWebGL: boolean | null
    isSupportedWebRTC: boolean | null
}

Using Vue.js:

Since device is a reactive proxied object, Vue.js can observe changes without needing to use the watch method:

<template>
    <pre>{{ deviceInfo }}</pre>
</template>

<script>
import { device } from '@maoosi/device.js'

export default {
    data() {
        return { deviceInfo: device }
    }
}
</script>