Valdres

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

import { createValue } from "valdres-solid"
import { screenAtom } from "@valdres/browser-screen"

function Resolution() {
    const s = createValue(screenAtom) // () => ScreenInfo
    return <span>{s().width} × {s().height}</span>
}

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.