Description

• Simple EventBus (emit)
• Quick for update. (No need share context/redux with react/vue/angular/etc...)
• Top EventBus, can use with mFE
• Can use with react/vue/angular/etc...

Usage

npm install eventbus-z --save

Import the module in the place you want to use:

import EventBus from 'eventbus-z'

Snippet with react

simple

    React.useEffect(() => {
        EventBus.$on("NAME_ABC", func)
        // EventBus.$on("NAME_DEF", func2)

        // clean
        return function() {
            EventBus.$off("NAME_ABC", func)
            //...EventBus.$off("NAME_DEF", func2)
        }
    }, [])

    // @ts-ignore
    const func = (item, xxx) => {
      // do something
      alert(item)
    }

	// from another element
    buttonClick = () => {
        EventBus.$emit("NAME_ABC", 434, 44)
        // EventBus.$emit("NAME_DEF", [434, 44], 44, "434") // multi value, any type
    }

hook with react

import { $on, $off } from 'eventbus-z';

// can use-callback
export const useEventBus = (name, callback) => {
  React.useEffect(() => {
    $on(name, callback);

    return function () {
      $off(name, callback);
    };
  }, [name, callback]);

  return { name, callback };
};

export default useEventBus;

const App = () => {
    useEventBus('NAME', () => {
        alert('abcd');
    })

    return <Child />;
}

const Child = () => {
    return <button onClick={() => $emit('NAME')}>Abcd</button>
}

Desciption

/**
 *  default global. You just need to use this.
 */
// notify event data
$emit(name, ...restparams) => notify event(name, ...restparams)

// listen for event (once time)
$once(name, func) => register event one time

// listen for event (unique event name) // => prefer use
$on(name, func) => register single event (unique)

// listen for event (unique event name and cached time)
$onCached(name, func, timeCached) => onCached event => [default 100ms]

// listen for events => same name and multile registered (need experiences)
$onMultiple(name, func) => register event

// listen for events (multi listen and cached time)
$onCachedMultiple(name, func, timeCached) => onCached event => [default 100ms]

// clear all listening for events (global)
$off(name, func) => off event and function register

$offAll(name) => offAll event by name

// clear all listening for events
$clearAllEventName(name) => remove all events from all scopes

/**
 *
 *  split scope events (scopeName) => extends
 */
// notify event data
$scopeEmit(name, scopeName, ...restparams) => notify event

// listen for event (once time)
$scopeOnce(name, scopeName, func) => register event one time

// listen for event (unique event name)
$scopeOn(name, scopeName, func) => register single event (unique) // => prefer

// listen for event (unique event name and cached time)
$scopeOnCached(name, scopeName, func, timeCached) => onCached event => [default 100ms]

// listen for events => same name and multile registered (need experiences)
$scopeOnMultiple(name, scopeName, func) => register event

// listen for events (multi listen and cached time)
$scopeOnCachedMultiple(name, scopeName, func) => register event

// clean listening for events on scope
$scopeOff(name, scopeName, func) => off event and function register

$scopeOffAll(name, scopeName) => offAll event by name

Run

LIVE EXAMPLE

npm install

npm run dev
npm run start

License

MIT