react-mousetrap-mixin
React component and mixin for mousetrap.
Demo
Installation
npm install --save react-mousetrap-mixin
Component API
Mousetrap
Props
propTypes: mousetrap: ReactPropTypesobject
-
mousetrap
:mousetrap bindings
keys
:callback
pairsor shapes in
keys: { callback: function(){}, action: function() }
Example:
let mousetrap = {
'up up down down left right left right b a'() {
alert('Konami');
},
'up x down b l y r a'(){
alert('カカロットォ');
},
'esc':{
callback() {console.log('esc');},
action: 'keyup'
}
}
Keys, callbacks and actions are passed to Mousetrap.bind
.
See also https://craig.is/killing/mice for detail.
Usage example
; Component { superprops; thisstate = {} } { let mousetrap = 'up up down down left right left right b a' ; 'up x down b l y r a' ; 'esc': {console;} action: 'keyup' return <div> <Mousetrap mousetrap=mousetrap /> </div> ; };
See also example
Mixin API
It is also exported as Mixin
.
MousetrapMixin
-
getMousetrap
:Will be called on
componentDidMount
.must return mousetrap key-callback object like prop.
-
addMousetrap(key, callback, action)
:Add new mousetrap binding.
-
removeMousetrap(key, action)
:Remove existing mousetrap binding.
Usage example
;; let MyMousetrap = React;
See also example
npm installnpm run start:example
Tests
npm test