fluent-keys

A simple, fluent library for handling keyboard events.

Problem statement

Writing one-off functions to handle keyboard events for specific keys can be tedious:

render() {
  const { text } = this.props;

  return <button onKeyDown={event => this.handleKeyDown(event)}>{text}</button>;
}

...

handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
  if (event.key === 'Enter') {
    this.props.doSomething();
  }
}

Not only do you have to add a new function (usually lower down in the file), but also need to add a fair amount of boiler plate. This is exacerbated if you end up needing special keys (i.e. ctrl, shift, alt) or multiple keys to map to a function.

Using fluent-keys

One alternative is to use fluent-keys. It provides convenient alternatives to map key presses (that is either up, down, or press) to bound functions:

render() {
  const { doSomething, text } = this.props;

  return <button onKeyDown={Key.is.enter.then(doSomething)}>{text}</button>;
}

Sample of API

| Example | Explanation | | ------- | ----------- | | Key.is.alphanumeric.then(...) | For any alphanumeric (capital and lowercase letters and numerals), invoke function | | Key.is.letter.then(...) | For any letter (capital or lowercase), invoke function | | Key.is.lowercase.letter.then(...) | Lowercase letters | | Key.is.uppercase.letter.then(...) | Uppercase letters | | Key.matches('F').then(...) | Can match any single character | | Key.matches('{', '[', '(').then(...) | Can match any character in list of characters | | Key.is.space.then(...) | Space bar | | Key.meets(/^[1-5]{1}$/).then(...) | can define arbitrary regex |

Some alternatives

Fluent-keys is a good choice for many use cases. That said, consider these other cool approaches. They may or may not be better for your usecase or complement fluent-keys:

• glortho/react-keydown - key decorators!
• ayrton/react-key-handler - a react component to handle keyboard events

For your consideration

• I recommend trying out this library and seeing if it works well for you
• TODO: I haven't tested out how performant this library is