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">
        <Keyboardist
          bindings={{
            Slash: this.focusSearch,
            Space: this.doSomethingElseWhenPressingSpace,
          }}
        />
      </div>
    );
  }
}

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
subscription.unsuscribe();

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.

Demos

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

Presenting Keyboardist

This is me, showing my first open source package.

Demos

Meta