Description

• Simple EventBus (emit / listen)
• Quick for updates, no need to share context/redux with React/Vue/Angular
• Supports microFE / iframe (uses window.top)
• Works with React / Vue / Angular / Vanilla JS

Installation

npm install eventbus-z --save

Import the module:

import EventBus from 'eventbus-z';

Usage Examples

1️⃣ Simple React Example

import React from "react";
import EventBus from "eventbus-z";

const func = (item: any) => {
  alert(item);
};

const App = () => {
  React.useEffect(() => {
    EventBus.$on("NAME_ABC", func);

    return () => {
      EventBus.$off("NAME_ABC", func);
    };
  }, []);

  const handleClick = () => {
    EventBus.$emit("NAME_ABC", 123);
  };

  return <button onClick={handleClick}>Emit Event</button>;
};

export default App;

2️⃣ React Hook Example

import { $on, $off, $emit } from "eventbus-z";
import React from "react";

export const useEventBus = (name: string, callback: (...args: any[]) => any) => {
  React.useEffect(() => {
    $on(name, callback);
    return () => $off(name, callback);
  }, [name, callback]);
};

const Child = () => {
  return <button onClick={() => $emit("NAME")}>Emit Event</button>;
};

const App = () => {
  useEventBus("NAME", () => alert("Event triggered!"));
  return <Child />;
};

API

Global Event (default scope)

| Method | Description | | ----------------------------------------------- | ---------------------------------------- | | $emit(name, ...args) | Notify event with arguments | | $once(name, callback) | Listen once | | $on(name, callback) | Listen single (unique callback) | | $onCached(name, callback, timeCached) | Listen single with cache (default 100ms) | | $onMultiple(name, callback) | Listen multiple callbacks | | $onCachedMultiple(name, callback, timeCached) | Listen multiple with cache | | $off(name, callback) | Remove callback for event | | $offAll(name) | Remove all callbacks for event | | $clearAllEventName(name) | Remove all events from all scopes |

Scoped Events

| Function | Description | | ------------------------------------------------------------ | -------------------------------------------------- | | $scopeEmit(name, scopeName, ...params) | Notify event for a scope | | $scopeOnce(name, scopeName, func) | Register listener once in a scope | | $scopeOn(name, scopeName, func) | Register single event listener (unique) in a scope | | $scopeOnCached(name, scopeName, func, timeCached?) | Register cached listener in scope (default 100ms) | | $scopeOnMultiple(name, scopeName, func) | Multiple listeners in scope | | $scopeOnCachedMultiple(name, scopeName, func, timeCached?) | Multi-listener with cache in scope | | $scopeOff(name, scopeName, func) | Remove listener in a scope | | $scopeOffAll(name, scopeName) | Remove all listeners in a scope |

License

MIT

Live Example