HOE - Higher Order Events
HOE is an event handler especially designed keeping virtual dom libraries in mind.
Table of Contents
Installation
via npm:
$ npm install hoe --save
via CDN:
Usage
import * as hoe from 'hoe' // Logs the `Actions`const actionListener = { console} // Creating a new instanceconst emitter = hoe // Sample Usageconst component = emitter <div> <button =>Hello</button> <button =>Bye</button> <div> // vNode being returned from the componentconst vNode =
On clicking on buttons, the actionListener
logs the following Action
s —
// Hellotype: 'hello' value: ClickEvent // Byetype: 'bye' value: ClickEvent
The value
in this case is the actual click event.
Action
HOE converts DOM Events into an Action Type. An Action
has two properties —
type
: Its astring|number
identifier which depicts the originator of event. For example — if an event is fired from the side navigation, the correspondingAction
could have atype
asSIDE_NAV
.value
: Value is the payload that needs to be transmitted via theAction
. In most cases it would be the DOM event. In some cases the value it self could be anAction
. This is especially useful when the nesting of components is really deep and one would like to namespace actions based on the hierarchy of components.
Example
API
hoe.create(actionListener)
This is the constructor function for creating the action emitter. It takes in a single listener and returns an instance of Hoe
.
Usage
const actionListener = { // do something with that event} const emitter = hoe // returns a Hoe
emitter.of(type)
It takes in a type
which is of type string|number
and returns a new instance of Hoe
. For Eg:
const h0 = hoeconst h1 = h0
emitter.emit(value)
It is available on all Hoe
instances. It takes in any value
and based on the type
it dispatches an action
.