@joseaburt/react-event-bus

react-event-bus 🚌

This is a simple project (lightweight 6.68 KB) for creating react applications using event-driven architecture.

Installation

$ npm install @joseaburt/react-event-bus   # for yarn users
$ yarn add @joseaburt/react-event-bus      # for yarn users

How to use it?

Just wrap your application with the provider.

// src/index.js

import ReactDOM from 'react-dom/client';
import EventBusProvider from '@joseaburt/react-event-bus';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <EventBusProvider>
    <App />
  </EventBusProvider>,
);

---

Benefits

• Very simple to use
• Stop creating very components

How to integrate with my existing code?

To keep your code clean with any code implementation, it is proposed to create an adapter using a hoc:

import { useEvenBus, useBusEffectOn } from '@joseaburt/react-event-bus';

/**
 * Adapt a given Menu Component to work with event-driven.
 */
export default asideMenuAdapter(Menu);
{
  return function (props) {
    const { dispatch } = useEventBus();
    const [isOpen, setOpen] = useState(true);

    useBusEffectOn('togle-menu', val => setState(pre => !pre));

    // You need a subscriber to this. Maybe react-router-dom
    const handleOnItemClick = index => dispatch('redirect-to', index);

    return <Menu {...props} open={isOpen} onItemClick={handleOnItemClick} />;
  };
}

export Menu from '.';

export default asideMenuAdapter(Menu);

What if I want to create my own provider or impl?

Well, that is an easy tasks. The key here is the bus, so you just need a new bus instance and a new context. Check the example:

import { EventBusBuilder } from '@libs/event-bus';
import { useMemo, createContext, useContext } from 'react';

// Your Context
const Context = createContext();

// Your Provider
export function EventDrivenComponentProvider({ children, debug, logPrefix }) {
  // Your Memo New Bus Instance
  const bus = useMemo(() => EventBusBuilder({ debug: debug === true, logPrefix }), []);
  return <Context.Provider value={bus}>{children}</Context.Provider>;
}

// Your Hook
export function useEventDrivenComponent() {
  return useContext(Context);
}

// Your Hook Effect
export function useEventDrivenComponentEffect(event, cb) {
  const { listen } = useEventDrivenComponent();
  useEffect(() => {
    const off = listen(event, cb);
    return () => {
      off();
    };
  }, [listen, event]);
}

With this you have just created your new API for your specific context using event-driven with the bus.

Contributing

Please see the Contributing Guidelines.

Author

• Jose Aburto