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 { Component } from "@angular/core"
import { injectValue } from "valdres-angular"
import { screenAtom } from "@valdres/browser-screen"

@Component({
    selector: "screen-resolution",
    template: `{{ s().width }} × {{ s().height }}`,
})
export class ScreenResolution {
    s = injectValue(screenAtom) // Signal<ScreenInfo>
}

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.