Define and dispatch shortcuts with easy using keybuddy.
keybuddy provides a simple and consistent toolset for defining and dispatching keyboard shortcuts in a browser
yarn add keybuddy
import key from 'keybuddy';
key('a', e => console.log('a pressed'))
key('shift+r', e => console.log('shift+r pressed'))
key('⌘+shift+r, ctrl+shit+r', e => console.log('ctrl+shit+r pressed'))
Based on keymaster
Differences:
- Completely rewritten in modern js using TS
- Support multiple keystrokes
- Custom scope not conflicting with default one
- Unbind requires an action (unsafeUnbindKey for backward compatibility)
- Creator instance to replace document with any other DOM element
- More explicit API
- Provides new fixes and maintaining
Keybuddy understands the following modifiers:
⇧
,shift
,⌥
,alt
,option
,⌃
,ctrl
,control
,⌘
,command
The following special keys can be used for shortcuts:
backspace
,tab
,clear
,enter
,return
,esc
,escape
,space
,left
,up
,right
,down
,del
,delete
,home
,end
,pageup
,pagedown
,comma
,.
,/
,``` ,-
,`=` ,`;` ,`'` ,`[` ,`]` ,``
import key, { DEFAULT_SCOPE } from 'keybuddy';
// import { bindKey } from 'keybuddy';
bindKey('option+e', action);
bindKey('option+e', 'myScope', action);
// use skipOther option to make primary action on same key bindings
bindKey('option+e', DEFAULT_SCOPE, action, { skipOther: true });
bindKey('option+e', 'myScope', action, { skipOther: true });
Action is required for unbind
import { unbindKey } from 'keybuddy';
unbindKey('option+e', action)
bindKey('option+e', 'myScope', action)
Returns current scope
Change scope
Remove all scope actions
Remove all actions
Remove all actions for a key
import { unsafeUnbindKey } from 'keybuddy';
unsafeUnbindKey('option+e')
unsafeUnbindKey('option+e', 'myScope')
Remove all actions and event listeners
Keybuddy creator can be used to replace key bindings on document
filterFn by default skip all editable areas - contenteditable, input, select, textarea
The reasons that events like onpaste, oncopy want fire keyup event for key bindings
import creator from 'keybuddy/creator';
const iframe = document.getElementById('#iframe').contentWindow;
/**
* { bind, unbind, unsafeUnbind, unbindScope, setScope, unbindAll, getScope:}
*/
const myKeybuddy = creator(iframe, filterFn?)
myKeybuddy.bind('alt+b', action);