Reon

Event library for React

This library acts as a helper dealing with React's event system and ensures a flexible interface between components.

Installation

npm install --save reon

React < 15.4.0

npm install --save reon@^1

Goals

• Remove some boilerplate from code handling events in React.
• Make the interface of an event more flexible by passing an object in as the only argument.

Instead of writing

if(this.props.onUploadReady)this.props.onUploadReady(file);

you now write

Reon.trigger(this.props.onUploadReady,{ file });

Usage

// Trigger new events
Reon.trigger(eventHandler, [eventData]);
// Forward an event previously received from Reon / React
Reon.forward(eventHandler, originalEvent, [eventData]);
// Create eventData object with lazy properties
Reon.lazy(properties, [objectToAttachTo]);

The eventHandler will receive an object as its first argument which contains all of the properties of eventData and optionally the properties reonEvent, reactEvent and nativeEvent when using Reon.forward.

• reonEvent is added when the forwarded event is an event generated by Reon.
• reactEvent is added when the forwarded event is either a React Synthetic Event or a event generated by Reon. It will point to the original React event that was forwarded.
• nativeEvent is added whenever Reon.forward is used, it will point to the original event that the browser itself generated.

Examples

Trigger new events

importReonfrom'reon';constButton=(props)=>(<buttononClick={e=>{Reon.trigger(props.onClick,{value: props.label});}}>{props.label}</button>);constApp=(props)=>(<Buttonlabel="foo"onClick={e=>{console.log(e.value);}}/>);

Passing synthetic events to the next component.

importReonfrom'reon';constButton=(props)=>(<buttononClick={e=>{Reon.forward(props.onClick,e,{value: props.label});}}>{props.label}</button>);constApp=(props)=>(<Buttonlabel="foo"onClick={e=>{e.stopPropagation();console.log(e.value);}}/>);

Creating lazy event properties

importReonfrom'reon';constButton=(props)=>(<buttononClick={()=>{Reon.trigger(props.onClick,Reon.lazy({button: ()=>this,test: ()=>'value of test property'}));}}>{props.label}</button>);constApp=(props)=>(<Buttonlabel="foo"onClick={e=>{console.log(e.button);// prints Button instanceconsole.log(e.test);// prints "value of test property"}}/>);

Contributing

If you have some issue or code you would like to add, feel free to open a Pull Request or Issue and we will look into it as soon as we can.

License

We are releasing this under a MIT License.

About us

If you would like to know more about us, be sure to have a look at our website, or our Twitter accounts Ambassify, Sitebase, JorgenEvens