Presenting Keyboardist

This is me, showing my first open source package.

June 04, 2018


I really like my keyboard shortcuts. Nothing says Power User™ than expertly using an application without even without touching the mouse. So, whenever I am building a web app I always try to add some keyboard capabilites to navigate the UI.

Recently, while making our React Dashboard I wanted to add some keyboard shortcuts, for example, having the global search input gain focus when the slash (/) key is pressed. That’s a pretty common and useful shortcut right?. I couldn’t find an easy and declarative way to do this in React so I built a component that works like this.

class Dashboard extends React.Component {
  focusSearch() {
    // do some vodoo here to get the search focused

  doSomethingElseWhenPressingSpace() {
    console.log('Space was pressed');

  render() {
    return (
      <div className="dashboard">
            Slash: this.focusSearch,
            Space: this.doSomethingElseWhenPressingSpace,

I really liked this approach because it is declarative and since it’s a component, it takes care of suscribing/unsuscribing to events using the component’s lifecycle. We’ve been using this in production for a couple years now and despite some tweaking I’m very happy with it.

Just recently I realized that most of what this component is doing is not tied to React itself, so I extracted the code into a dependency-free, library-agnostic JavaScript library called Keyboardist and I’m releasing it along with React-Keyboardist which is the React wrapper.

This is what pure-javascript Keyboardist looks like.

// import the library
import createListener from 'keyboardist';

// creates a listener, by default it listens to 'keydown' events.
const listener = createListener();

//the listener has a suscribe function
const subscription = listener.subscribe('Slash', focusSearch);

// And later you want to cancel the subscription for some reason

It has a really simple API and I hope to make wrappers for other frameworks other than React.

You can install them via npm or yarn.


I built two simple demos for both Keyboardist and React-Keyboardist. Their require, you know, a keyboard.


This is my first ever Open Source package and I’m kinda freaked out about the reception (or lack thereof) that this is going to receive. Regardless, I would be very happy to hear any feedback. If you have any, you can find me on Twitter or via email at arm.sosa[at]