🧬 Reactive library to observe essential browser and device properties.
Reactive library to observe essential browser and device properties.
⚠️ Version 2 is not backward compatible with version 1. Check the Changelog for more details.
chrome, safari, firefox, facebook, instagram, edge, ie, opera, phantomjs
webp, webrtc, webgl, pwa
portrait, landscape
desktop, mobile, tablet, tv
android, ios, windows, macos
width, height
yarn add @maoosi/device.js
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>
First, make sure you have Vue.js Instant Prototyping service installed: https://cli.vuejs.org/guide/prototyping.html
Then from your terminal:
yarn playground
Contributions, issues and feature requests are welcome.
Copyright © 2021 maoosi.
This project is MIT licensed.