Numbers Produce Meaning

    reon

    3.1.3 • Public • Published

    Reon CircleCI

    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

    Install

    npm i reon

    DownloadsWeekly Downloads

    6

    Version

    3.1.3

    License

    MIT

    Unpacked Size

    25.2 kB

    Total Files

    9

    Last publish

    Collaborators

    • jorgenevens
    • sitebase
    • ambassify