@kambing86/event-bus-ts

event-bus

a simple event bus to be used in JavaScript/TypeScript Application, with React hook

Install

npm install @kambing86/event-bus-ts

Usage

• add @kambing86/event-bus-ts by installing npm install @kambing86/event-bus-ts
• create a file for event bus, for eg. "src/util/eventBus.ts"

import { createEventBus, createUseEventBus } from '@kambing86/event-bus-ts';

// string enum for Event
export enum EventType {
  ADD_TODO = 'addTodo',
  REMOVE_TODO = 'removeTodo',
}

// or just const
export const EventType = {
  ADD_TODO: 'addTodo',
  REMOVE_TODO: 'removeTodo',
} as const;

// define the payload data for Event
export type EventDataMapping = {
  [EventType.ADD_TODO]: { id: number; text: string };
  [EventType.REMOVE_TODO]: number;
};

export const eventBus = createEventBus<EventDataMapping>({ events: EventType });

export const useEventBus = createUseEventBus<EventDataMapping>(eventBus);

• then use it in React component

function NewTodo() {
  // ...
  return <button onClick={() => eventBus.dispatch(EventType.ADD_TODO, newTodo)}>Add new</button>
  // or
  return <button onClick={() => eventBus.actions.addTodo(newTodo)}>Add new</button>
}

function TodoList() {
  const [todoList, setTodoList] = useState([]);

  // ...

  useEventBus(EventType.ADD_TODO, (newTodo) =>
    setTodoList((prev) => [...prev, newTodo]),
  );

  return <div>{todoList.map((todo) => <div>{todo.text}</div>)}</div>
}

Maintainers

Chua Kang Ming