fluent-keys

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