browser-screen
Wraps window.screen as one global atom, synced on resize, orientationchange, and DPR changes.
Install
bun add @valdres/browser-screenLive example
Loading demo…
Usage
<script setup>
import { useValue } from "valdres-vue"
import { screenAtom } from "@valdres/browser-screen"
const screen = useValue(screenAtom) // Ref<ScreenInfo>
</script>
<template>{{ screen.width }} × {{ screen.height }}</template>Exports
| Export | Kind | Type |
|---|---|---|
screenAtom | atom (read-only) | ScreenInfo |
ScreenInfo | type | { width, height, availWidth, availHeight, colorDepth, pixelDepth, devicePixelRatio, orientationType, orientationAngle } |
All fields are number except orientationType: OrientationType. Outside the browser the atom returns a fallback (zeros for dimensions; colorDepth/pixelDepth 24, devicePixelRatio 1, orientationType: "landscape-primary").
The browser subscription starts on the first subscriber across all stores and stops when the last one leaves.