Mousetrap JS

So you came here to learn about mousetraps right? So mousetraps are great for capturing rodents with a spring-loaded mechanism. Totally kidding! This isn't about those kinds of mousetraps. This is about a neat Javascript library for fairly simple and easy keybinding! Mousetrap has many awesome capabilities. It's extremely lightweight with no external dependencies.

You can get Mousetrap by doing a simple npm install mousetrap and require it in your app. Do that and now you can start using mousetraps like a pro!

Let's get right into it! First, there is Mousetrap.bind. Let's look at some examples!

    // single keys
    Mousetrap.bind('4', function() { console.log('4'); });
    Mousetrap.bind("?", function() { console.log('show shortcuts!'); });
    Mousetrap.bind('esc', function() { console.log('escape'); }, 'keyup');

    // combinations
    Mousetrap.bind('command+shift+k', function() { console.log('command shift k'); });

    // map multiple combinations to the same callback
    Mousetrap.bind(['command+k', 'ctrl+k'], function() {
        console.log('command k or control k');

        // return false to prevent default browser behavior
        // and stop event from bubbling
        return false;
    });

    // gmail style sequences
    Mousetrap.bind('g i', function() { console.log('go to inbox'); });
    Mousetrap.bind('* a', function() { console.log('select all'); });

    // Alphabet!
    Mousetrap.bind('a b c d e f g', function() {
        console.log('Now I know my abc's');
    });

So bind will be used to literally allow you to bind specific sets of keys to a specified callback method. On top of that, if for whatever reason you wanted to you can even overwrite default keyboard shortcuts. And you can also specify whether your shortcut is a keyup, keydown, or a keypress by adding a third argument to the bind method. This way you can bind multiple types of keypresses to the same key or combination of keys.

And that leads to the next thing.Mousetrap.unbind. With this method, you can unbind a single key or an array of keyboard events. If you previously used bind to bind a key and you specified the kind of keypress, then you must specify the same kind of keypress in the unbind.

Mousetrap.bind('b', () => { console.log('b was pressed') } 'keydown');

// This is how you must do it if you specified a specific keypress
Mousetrap.unbind('b', 'keydown');

Next Mousetrap has a neat way of triggering the same keyboard event. If for whatever reason you wanted to fire off an event that you had previously bound to a key, you can easily 'trigger' that event by using Mousetrap.trigger.

Mousetrap.trigger('b');

This method can also take in an optional argument for the type of keypress like the other functions.

Finally, we will take a look at one last method. Mousetrap.reset is yet another useful method. The reset method will remove anything you have bound to mousetrap. This can be useful if you want to change contexts in your application without refreshing the page in your browser. Internally mousetrap keeps an associative array of all the events to listen for so reset does not actually remove or add event listeners on the document. It just sets the array to be empty.

This is only some of the functionality of Mousetrap. You can go see the rest here. Mousetrap is an awesome, easy to use library that I highly recommend using if you want to make simple keybinding events.