event-helpers
A collection of utils and ES7 decorators to help you handle events.
Installation
npm install --save event-helpers
Examples
Here are a couple of examples using some of the utility functions provided by event-helpers.
Stopping propagation
Before:
;
After:
; ;
Limiting event handlers to left click
Before:
;
After:
; ;
With React
;; Component { return <button onClick=thisonClick>click me</button>; } @ifLeftClick { // do stuff... }
Limit based on which key was pressed
;; Component { return <div> <ChatMessages /> <textarea onKeyPress=thissendMessage /> </div> ; } @ { if // send message else if eventshiftKey // add new line }
Write your own!
You can write your own decorators using ifFn
. ifFn
is a function that takes
a predicate and returns a decorator that will only run if the predicate passes.
; { return eventbutton === 2;} var ifRightClick = ;
List of helpers
ifFn
isUnmodified
- Returns true if there were no modifiers (ctrl, alt, shift, meta)isLeftClick
isLeftClick2
- LikeisLeftClick
, but operates on the second argument.killEvent
killLeftClickEvent
isKeyOf
- Returns true if the key pressed was any of the array passed in. Note: This only works on browsers that implement the KeyboardEvent.key property.ifKeyOf
How to build
To compile for node:
npm run compile-node
To compile for browser:
npm run compile-browser
Note: Make sure to compile-browser
before committing. Thanks!
To release to npm:
npm version patch
npm publish