eventbus-z/README.md

Simple event emitter. Global event emitter

<div align="center">
    <h1>eventbus-z</h1>
    <br />
    <a href="https://codesandbox.io/s/d5robq">LIVE EXAMPLE</a>
</div>

---

#### 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
```js
npm install eventbus-z --save
```

Import the module in the place you want to use:
```js

import EventBus from 'eventbus-z'
```
#### Snippet with react

###### simple
```js
    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
```js
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

```js
/**
 *  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
```
<br />

```js
/**
 *
 *  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
```

<br />

#### Run

<a href="https://codesandbox.io/s/d5robq">LIVE EXAMPLE</a>

```js
npm install
```
```js
npm run dev
npm run start
```

#### License
MIT