README

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

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

Usage no npm install needed!