React Events

Event Manager for React JS application.

Installation

npm install react-nebo15-events --save

Usage

import React from 'react';
import { EventManager } from 'react-nebo15-events';
import { render } from 'react-dom';

const eventManager = new EventManager();

eventManager.subscribe([
  'Event #1',
  'Event #2',
  'Event #3',
], (name, options) => {
  console.log('event', name, options);
});

render(<EventManagerProvider manager={eventManager}>
  {...application}
</EventManagerProvider>, document.getElementById('root'));


// Some component

class App extends React.Component {
  render() {
    return (
      <EventOptions options={{ component: 'app' }}>
        <EventTrack name="Event #1">
          <button>Click me</button>
        </EventTrack>
      </EventOptions>
    );
  }
}

// Click on button invokes event `Event #1` with options { component: 'app' }.

// You can also use EventManager via context `eventManager`

class MyPopup extends React.Component {
  static contextTypes = {
    eventManager: React.PropTypes.object.isRequired,
  };
  componentDidMount {
    this.eventManager.track('MyPopup Appeared');
  }
  render() {
    return (
      <div>My popup</div>
    );
  }
}

EventManager

Manager of subscriptions for events.

Methods

• track
• subscribe
• register
• subscribeAll
• unsubscribeAll

EventManagerProvider

HOC component that defines the context for the children elements in React application. All inherit elements will have the context eventManager

Properties

| Name | Type | Default value | Description | | - | - | - | - | | manager | EventManager | global event manager | EventManager that will manage the subscription and handle the events from the children of this EventManagerProvider |

Contextes

EventManagerProvider defines the context eventManager to pass the instance of EventManager to the instances of EventTrack and EventOptions.

| Name | Type | Description | | - | - | - | | eventManager | EventManager | EventManager passed as a prop manager in EventManagerProvider or default the global EventManager |

EventTrack

Event track component. Using EventTrack, you can define the events in your application. EventTrack add the event listener to your element and fire the event in the EventManager.

Properties

| Name | Type | Default value | Description | | - | - | - | - | | name | string | - | Event name | | event | string | onClick | Name of the event handler. According to this doc: https://facebook.github.io/react/docs/events.html | | options | object | - | Options, what will sended to the eventManager then event fires. | | extendOptions | boolean | true | Extend or replace the options from parent EventOptions | | wrap | string or React.Element | - | Wrapping element. Can be useful when EventTrack can't set the event handler to the element (eg. you use recompose/pure) or if you have few child components. |

EventOptions

EventOptions can be useful if you want to pass the options to all child EventTrack components. eg. You want to know the name of the component there the EventTrack was fired.

<EventOptions options={{ component: 'header' }}>
  <header>
    <EventTrack name="Logo Click">
     <img src="images/logo.png" />
    </EventTrack>
    <Navigation />
  </header>
</EventOptions>

According to this example, when Logo Click will fire, it will be received in the EventManager with options {component: 'header' }. If Navigation has its own EventTracks, they also will be fired with the component: 'header' in the options. (only if EventTrack.extendsOptions is not set to false)

Properties

| Name | Type | Default value | Description | | - | - | - | - | | options | object | - | Options will be used during firing the event in the inherit EventTrack components |