@zacostudio/react-eventhandler

react-eventhandler

It is a component for easy processing of events in React using eventemitter3.

Install

npm install --save @zacostudio/react-eventhandler

or

yarn add @zacostudio/react-eventhandler

Usage

It's a light example.

import React, { useRef, useState, useEffect } from 'react'
import { useEventHandler, EventHandler } from '@zacostudio/react-eventhandler';

function App() {
  const resultRef = useRef(null);
  const [state, setState] = useState("");
  useEventHandler("EventFire", onEventReceived, [resultRef])

  useEffect(() => {
    window.setTimeout(() => {
      const now = Date.now();
      EventHandler.emit("EventFire", `${now}`);
        setState(`${now} Fired`);
    }, 1000);
  }, []);

  function onEventReceived(message) {
    if (resultRef && resultRef.current) {
      resultRef.current.innerText = `${message} Received`;
    }
  }

  function handleFireEvent() {
    const now = Date.now();
    EventHandler.emit("EventFire", `${now}`);
  }

  return (
    <>
      <button onClick={handleFireEvent}>Event Fire</button>
      <div id={'state'}>{state}</div>
      <div ref={resultRef} id={'result'}/>
    </>
  );
}

Event Receiver

• useEventHandler()
• EventHandler.install()

Event emitter

• EventHandler.emit()
• EventHandler.emitAsync()

License

MIT © zacostudio