Installation

With npm:

npm install @rnacanvas/key-bindings

Usage

All exports of this package can be accessed as named imports.

// an example import
import { KeyBinding } from '@rnacanvas/key-bindings';

class KeyBinding

The KeyBinding class represents a key binding.

var selectAll = () => {};

var keyBinding = new KeyBinding('A', () => selectAll(), { ctrlKey: true });

// bind the key binding to the entire webpage
keyBinding.owner = document.body;

Key bindings are not case-sensitive. The above key binding will be triggered for both Ctrl+A and Ctrl+a.

Modifying key combinations are exclusive, however. The above key binding will not be triggered by Ctrl+Shift+A, for instance.

owner

Key bindings don’t become active until their owner property is set, which stores a reference to the element that the key binding belongs to.

Setting the owner property of a key binding to the document body, for instance, will bind the key binding to the entire webpage.

// bind the key binding to the entire webpage
keyBinding.owner = document.body;

// deactivate the key binding
keyBinding.owner = undefined;

Key bindings can only possibly be triggered when their owner element has focus and is the target of the appropriate keyboard events.

Any element can be made focusable using the tabindex HTML property (see the MDN docs to learn more).

Note that the tabindex property is often disabled by default in Safari.

// not focusable by default
var ele = document.createElement('div');

// make the element focusable
ele.tabIndex = 0;

keyBinding.owner = ele;