Event Bus for use in React/Vanilla

EventBus.js

/*

To Use:

:: Component A ::
import eventBus from "./EventBus";

- Dispatch an Event to component B -
eventBus.dispatch("aResource", { resource: this.state.resource });

:: Component B ::
import eventBus from "./EventBus";

- receive the dispatched event and handle data from component A -

useEffect(() => {
...
   eventBus.on("aResource", (data) => {
      console.log(data.resource)
   });
...
}

:: EventBus.js ::
*/

const eventBus = {

    on(event, callback) {
      document.addEventListener(event, (e) => callback(e.detail));
    },

    dispatch(event, data) {
      document.dispatchEvent(new CustomEvent(event, { detail: data }));
    },

    remove(event, callback) {
      document.removeEventListener(event, callback);
    },

  };

export default eventBus;