Nebo15 / react-nebo15-events

Event Manager for application on React JS
MIT License
4 stars 2 forks source link
event events javascript reactjs

React Events

Greenkeeper badge Build Status

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

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="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

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