🧬 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>

🧪 Run the playground

First, make sure you have Vue.js Instant Prototyping service installed: https://cli.vuejs.org/guide/prototyping.html

Then from your terminal:

yarn playground

🤝 Contributing

Contributions, issues and feature requests are welcome.

📝 License

Copyright © 2021 maoosi.

This project is MIT licensed.