react-event-hooks

An event system to be used in combination with react hooks. Decouples your components and enhances there re-usability.

Install

$ npm install react-events-hooks

Live Examples

Comming soon!!!

Usage

import React from 'react';
import { Emitter, Listener } from 'react-events-hooks';

const EVENT_NAME = 'event-fancybutton-click';

// Creates a button with an Emitter
export class FancyButton extends React.Component<{ value: number, link: string }> {
  private _emitter = Emitter.New(`${EVENT_NAME}_${this.props.link}`);
  public render = () => (
    <button onClick={this.clickHandler} >{this.props.value}</button>
  )
  private clickHandler = () => this._emitter.Notify({ value: this.props.value });
}

// Creates a label with a Listener
export class FancyLabel extends React.Component<{ link: string }> {
  public state = { number: 0 };
  private _listener!: Listener;

  public componentDidMount = () => {
    this._listener = Listener.New(`${EVENT_NAME}_${this.props.link}`, ({ value }) => {
      this.setState({ number: this.state.number + value });
    });
  }

  public componentWillUnmount = () => {
    this._listener.Destroy();
  }

  public render = () => (
    <span >{this.state.number}</span>
  )
}

Now you can create the following in a render. I've registered the last FancyButton to the first FancyLabel to illustrate the decoupling of the components.

<FancyButton value={1} link="link1" />
<FancyButton value={2} link="link1" />
<FancyLabel link="link1" />
<hr />
<FancyButton value={1} link="link2" />
<FancyButton value={2} link="link2" />
<FancyButton value={3} link="link1" />
<FancyLabel link="link2" />

Emitter class

The Emitter class sends a signal to all listeners that are registert to it.

Warning:
Don't use the new Emitter(), instead use the Emitter.New(tag: string). This is done so that the emitter is automaticly registered to the internal event system.

Static

Properties

Methods

Listener class

The Listener class executes his registered function when the emitter sends a notification.

Warning:
Don't use new Listener(), instead use the Listener.New(tag: string | string[], () => void). This is done so that the Listener is automaticly registered to the right emitter.

Static

Properties

Methods

Hooks

There are also two hooks:

• useEmitter
• useListener

This example is the same as above only writen with hooks.

import React, { useState } from 'react';
import { useEmitter, useListener } from 'react-events-hooks';

const EVENT_NAME = 'event-fancybutton-click';

export const FancyButton: React.FC<{ value: number, link: string }> = ({ value, link }) => {
  const notify = useEmitter(`${EVENT_NAME}_${link}`);
  const clickHandler = () => notify({ value });

  return <button onClick={clickHandler} >{value}</button>;
};

export const FancyLabel: React.FC<{ link: string }> = ({ link }) => {
  const [num, setNum] = useState(0);
  useListener(`${EVENT_NAME}_${link}`, ({ value }) => setNum((pref) => pref + value));

  return <span >{num}</span>;
};

As you can see, the listener now no longer needs to be destroyed. This is done automaticly when the component is unmounted

Changelog

• See the CHANGELOG