Keysy-peasy

Keysy-peasy makes keyboard shortcuts easy peasy.

Please note - Keysy-peasy does not handle browser differences for key values, eg, IE uses "Esc" whereas other browsers use Escape

Start by importing the package

import { Shortcuts } from 'keysy-peasy';

const shortcuts = new Shortcuts(document);

The first param passed to Shortcuts is the element upon which the handler will be registered. If nothing is passed, it will default to document.documentElement.

All shortcuts exist within the scope of the Shortcuts instance. Within here, you can add an array of shortcuts and associate it with a namespace. The idea here is that you can register and remove shortcuts in a group, which is useful when you move between views with different sets of shortcuts.

Registering a handler

As mentioned before, Keysy-peasy works with contexts; the idea is that you can register a set of handlers, for a given view or template and remove them when your done. Let's register a handler for a text editor.

    shortcuts.register("text-editor", [{
        key:"q",
        callback: function(event) {
            alert("pressed alt + q")
        },
        altKey:true
    },{
        key:3,
        callback: function(event) {
            alert("pressed 3")
        }
    }]);
    

    interface IShortcut {
        key: string|number;
        callback: Function;
        altKey: boolean;
    }

Removing a handler

Given that we have added our shortcuts by a namespace, they can be removed by namespace:

    shortcuts.remove("text-editor")

Getting a list of shortcuts

One of the best parts of Keysy-peasy is that we have full control of our shortcuts; it's possible to query as to which shortcuts are registered at any given time. This makes it possible to dynamically show the user the current shortcuts

    const shortcutMap = shortcuts.getHandlers();

need AMD?

We build to AMD, but you'll need to include it directly from keysy-peasy/dist/amd/index.js