key-state
simple DOM keyboard state tracker
{ if keysleft if keysright }
This package is a thin wrapper over KeyboardEvent
which provides a flexible and intuitive interface for tracking DOM keyboard state.
install
To use this module in your project, package your code together using a bundler like rollup
together with rollup-plugin-node-resolve
.
usage
listen(element, keymap?)
To begin listening for key events, call the function exported by this module (listen
) while passing in the element
that you'd like to scope down key events to (usually window
), like so:
const keys =
listen
returns the keyboard state (keys
, for keyboard state) in the form of an object which maps browser-defined key names as provided by event.code
to the amount of frames the key in question has been held down. For example, after holding down the spacebar for half a second, keys.Space
would yield 30
at 60 frames per second.
The keys
map is populated and updated automatically as key events are received. If a key hasn't been pressed since the map was created, it will evaluate to undefined
. This feature implies that any key that isn't being pressed will be mapped to either 0
or undefined
, meaning you can check if a key is being pressed by determining if its value is truthy.
if keysEnter // The enter key is being pressed. Wow
If you'd prefer to use your own custom key names for flexibility, pass a keymap
into listen
with the following name -> [ keys ]
structure:
const keys =
Then, just access the key times using the names you specified. Feeding multiple keys into the keymap's corresponding key list will prompt the listener to lump all of those keys under a single name.
{ if keysleft if keysright }
license
MIT © Brandon Semilla