key-state

simple DOM keyboard state tracker

function loop() {
  if (keys.left) {
    move(hero, "left")
  }
  if (keys.right) {
    move(hero, "right")
  }
  requestAnimationFrame(loop)
}

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:

import listen from "key-state"

const keys = listen(window)

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 (keys.Enter) {
  // 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 = listen(window, {
  left: [ "ArrowLeft", "KeyA" ],
  right: [ "ArrowRight", "KeyD" ]
})

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.

function loop() {
  if (keys.left) {
    move(hero, "left")
  }
  if (keys.right) {
    move(hero, "right")
  }
  requestAnimationFrame(loop)
}

license

MIT © Brandon Semilla