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 wheneverReon.forward
is used, it will point to the original event that the browser itself generated.
Examples
Trigger new events
import Reon from 'reon';
const Button = (props) => (
<button onClick={e => {
Reon.trigger(props.onClick, { value: props.label });
}}>
{props.label}
</button>
);
const App = (props) => (
<Button label="foo" onClick={e => {
console.log(e.value);
}} />
);
Passing synthetic events to the next component.
import Reon from 'reon';
const Button = (props) => (
<button onClick={e => {
Reon.forward(props.onClick, e, { value: props.label });
}}>
{props.label}
</button>
);
const App = (props) => (
<Button label="foo" onClick={e => {
e.stopPropagation();
console.log(e.value);
}} />
);
Creating lazy event properties
import Reon from 'reon';
const Button = (props) => (
<button onClick={() => {
Reon.trigger(props.onClick, Reon.lazy({
button: () => this,
test: () => 'value of test property'
}));
}}>
{props.label}
</button>
);
const App = (props) => (
<Button label="foo" onClick={e => {
console.log(e.button); // prints Button instance
console.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