React Event Bus

Old Usages ( < v 1.0.0 )

import useEventBus from "event-bus-react";

const App = () => {
  const { subscribe } = useEventBus("MyEvent"); // default EventBus

  subscribe("alert", (data) => {
    console.log(data);
  });

  const handleEmitEvent = () => {
    MyEvent.emit("alert", { sayHello: "hello" });
  };

  return (
    <>
      <button onClick={handleEmitEvent}>Emit Event</button>
    </>
  );
};

New Usages ( >= v1.0.0 )

1.) Install event-bus-react package from npm.js

npm i event-bus-react

2.) Declare useEventBus() in the entry file of react or next.js project.

import useEventBus from "event-bus-react";

useEventBus();

3.) Subscribe the event anywhere in the component or pages.

import { subscribe } from "event-bus-react";

subscribe(
  "show-alert",
  () => {
    // do something...
  },
  []
);

4.) Emit the event wherever you are in the component tree.

EventBus.emit("show-alert");

Api Declaration

useEventBus(name)

useEventBus(); // EventBus
useEventBus("MyCustomEvent");

subscribe(eventName, callBack, dependencies)

subscribe("show-alert", (data) => {
  alert(data?.message);
});

subscribe(
  "show-result",
  () => {
    console.log(a + b);
  },
  [a, b]
);

emit(eventName, data)

EventBus.emit("show-alert", { message: "hello" });

MyCustomEvent.emit("show-result");