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

Contextes

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

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

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="https://github.com/Nebo15/react-nebo15-events/raw/master/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