browser-keyboard

Tracks which keys are currently held down, from the document's keydown / keyup events. Exposes the raw pressed keys plus selectors for codes, modifiers, and per-key checks.

Live example

Loading demo…

Press and hold keys — the on-screen keyboard reflects pressedCodesSelector live.

Install

bun add @valdres/browser-keyboard

Usage

import { useValue } from "valdres-react"
import { pressedCodesSelector, isCodePressedSelector } from "@valdres/browser-keyboard"

function Keys() {
    const codes = useValue(pressedCodesSelector) // KeyboardCode[]
    const shift = useValue(isCodePressedSelector("ShiftLeft"))
    return <span>{codes.join(" + ")}</span>
}

Exports

Export	Kind	Type
`pressedKeysAtom`	atom (read-only)	`PressedKey[]`
`pressedCodesSelector`	selector	`KeyboardCode[]`
`pressedKeyValuesSelector`	selector	`string[]`
`modifierSelector`	selector	`Modifier[]`
`isCodePressedSelector(code)`	selector family	`boolean`
`isKeyPressedSelector(key)`	selector family	`boolean`
`toggleKeyAtom(key)`	atom family (settable)	`boolean`

Cross-framework