Getting started

1) Install the library from npm registry:

npm install --save shortcutter

2) Import the necessary parts into your project:

import {PHASES, useShortcutter} from 'shortcutter';

3) Use shortcutter to start using shortcuts:

const shortcutter = useShortcutter();

4) Add your first key binding

shortcutter.listen(
  // context, where you would like to add a shortcut
  'default', 
  // keys, which invoke callback
  ['a', 's'],
  // callback which `shortcutter` should invoke
  (event: Event, phase: PHASES) => alert(`My first key binding on ${phase}`),
  // phases when `shortcutter` should invoke callback 
  PHASES.DOWN_PRESS_UP,
);

5) Open your test application in browser, and press A + S

API

Types

PHASES

The string-type PHASES contains all possible variants of the shortcut’s status.

Variant	Value
PHASES.DOWN	down
PHASES.PRESS	press
PHASES.UP	up
PHASES.DOWN_PRESS	down\|press
PHASES.DOWN_UP	down\|up
PHASES.PRESS_UP	press\|up
PHASES.DOWN_PRESS_UP	down\|press\|up

Interfaces

useShortcutter

Returns interface to control contexts and shortcuts.

const {
  listen,
  unlisten,
  hasContext,
  getActiveContext
  setActiveContext
} = useShortcutter();

shortcutter.listen

Adds a listener for defined keys into the shortcutter’s context.

Arguments	Type	Description
context	string	—
keys	string[]	—
callback	(event: Event, phases: PHASES) => void	—
phases	PHASES	—

Returns shortcutter.unlisten.

shortcutter.unlisten

Removes a listener for defined keys from the shortcutter’s context.

Arguments	Type	Description
context	string	—
keys	string[]	—
phases	PHASES	—

shortcutter.hasContext

Checks if a passed context is already added to Shortcutter.

Arguments	Type	Description
name	string	—

shortcutter.getActiveContext

Returns active context’s name.

shortcutter.setActiveContext

Sets passed context as the active one.

Arguments	Type	Description
name	string	—

Versioning

This library follows Semantic Versioning.

License

Shortcutter is available under the MIT license. See the LICENSE file for more details.

Crafted with :heart: to :clipboard: and :key: