browser-screen-details
Wraps the Window Management API (window.getScreenDetails()) as global atoms exposing the current screen, all connected screens, and the permission state.
Permission required
Screen details are empty until you call requestScreenDetails(), which prompts for the window-management permission. Requires a secure context.Install
bun add @valdres/browser-screen-detailsLive example
Loading demo…
Usage
import { createValue } from "valdres-solid"
import { currentScreenAtom } from "@valdres/browser-screen-details"
function Screen() {
const current = createValue(currentScreenAtom) // () => ScreenDetail | null
return <span>{current()?.label}: {current()?.width} × {current()?.height}</span>
}Exports
| Export | Kind | Type |
|---|---|---|
currentScreenAtom | atom (read-only) | ScreenDetail | null |
screensAtom | atom (read-only) | ScreenDetail[] |
screenPermissionAtom | atom (read-only) | ScreenPermissionState |
requestScreenDetails | util fn | () => Promise<ScreenDetail[] | null> |
ScreenDetail | type | { label, left, top, width, height, availLeft, availTop, availWidth, availHeight, colorDepth, pixelDepth, devicePixelRatio, orientationType, orientationAngle, isPrimary, isInternal } |
ScreenPermissionState | type | "prompt" | "granted" | "denied" | "unsupported" |
Cross-framework
All state is global atoms, so it works in every framework — only the read primitive differs. The atoms stay empty until requestScreenDetails() resolves; call it once from anywhere.