browser-screen

Wraps window.screen as one global atom, synced on resize, orientationchange, and DPR changes.

Install

bun add @valdres/browser-screen

Live example

Loading demo…

Usage

<script>
import { watch } from "valdres-svelte"
import { screenAtom } from "@valdres/browser-screen"

const screen = watch(screenAtom)
</script>

{screen.value.width} × {screen.value.height}

Exports

ExportKindType
screenAtomatom (read-only)ScreenInfo
ScreenInfotype{ 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.