KeysMe 😘

KeysMe is a tiny-tiny (note the double-tiny which makes it tiny * .5) library to handle keyboard interaction and super-complex hotkeys in a line.

• 1Kb gzipped
• ZERO dependencies (optional dependency on react to use the useHotkey hook)
• 100% test coverage

...by design.

Exported as a ES module, can work with any JS project + has a beautiful React hook for even more enjoyment.

Installation

npm install --save keysme

Usage

Pure function

As a pure function it can be used to perform simple checks against a KeyboardEvent-like object and a hotkey (string):

// checkHotkey(KeyboardEvent-like, hotkey);
 
// Example
 
import {checkHotkey} from "keysme";
 
myInput.addEventListener('keyup', e => 
    // works in a focused input
    checkHotkey(e, 'Shift-Ctrl-A') && doSomething()
);
 
body.addEventListener('keyup', e =>
    // works on the entire page 
    checkHotkey(e, 'Meta-Space') && doSomething()
);
 

Global event registerer

It can register and deregister global events for you (those that are listened on the body):

// registerHotkey(hotkey, f);
// deregisterHotkey(hotkey, f);
// deregisterHotkey(hotkey);
 
// Example
 
import {registerHotkey, deregisterHotkey} from "keysme";
 
registerHotkey('Shift-Ctrl-A', doSomething);
deregisterHotkey('Shift-Ctrl-A', doSomething);
deregisterHotkey('Shift-Ctrl-A');

React hook

As a hook it works easily with React functional components:

import {useHotkey} from 'keysme/react';
 
const Component = props => {
    useHotkey('Shift-Ctrl-A', doSomething, dependencies);
    return <div>I am amazing</div>
};

As a hook it will take care of registering and deregistering for you. Internally it will operate something like:

// ...
useEffect(() => {
    registerHotkey(options.hotkey, option.f);
    return () => {
        deregisterHotkey(options.hotkey, options.f)
    };
}, options.deps);
// ...

Please fork and contribute.