useKeyState

Keyboard events as data for React. Proposal for an alternative to event callback hook APIs.

For example:

const {asd} = useKeyState({asd:'a+s+d'})

Pass it a map of hotkey rules and it hands back one of the same shape. The values are state objects with three boolean properties: pressed, down and up. Your component will re-render only when a rule starts or stops matching. Try it:

(asd.down)     false
(asd.pressed)  false
(asd.up)       false

React is pretty good about not letting you shoot yourself in the foot; however:

useEffect(() => {
  if(asd.down) setState(Math.random())
})

would be an infinite loop if it wasn't for this one small detail: while pressed returns true for as long as the rule matches, down and up are special and will only return true once — this guarantees that they return false the next time the component re-renders. This is the equivalent of an event callback — you read it, consider yourself notified.

In practice, this isn't a big deal as you can always capture the value if you need in more than one place.

Callbacks are fine until you want to base your render logic on the state of the keyboard. This is an attempt to represent key states while preserving the semantics of the key up and down events.

Hooks allow us to push external details like callbacks to the periphery (which also makes them very reusable, yay!) keeping our render code noise free. It lets us pretend the component's world is much simpler than it really is.

useKeyState is now on npm:

npm install use-key-state --save-dev

The implementation is self-contained and has been solid for me in non-trivial applications. It is however still pre-1.0 so some things may change in the near future!

Let me know what you think.

Links:

• ⭐ github/use-key-state

• 🏖️ codesandbox/example try it out

• 🏖️ codesandbox/meta this website

Inspiration and further reading:

• Paul Henschel's useGesture - is the original inspiration. Use this, it is really good.

• Dan Abramov's debug UI thread on Twitter - notice we care about the value as it changes, not the change event. Subtle but important difference.

• Game engines like Unity expose APIs like Input.GetKeyDown that represent the state of the keys at a particular frame. I have a channel about immediate mode GUIs on are.na if you'd like to learn more.