npm install @kambing86/event-bus-ts- add
@kambing86/event-bus-tsby installingnpm 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);
const subscription = eventBus.subscribe(EventType.ADD_TODO, (todo) => {
console.log(`${todo.text} is added`);
});
// Dispatch an event with payload
eventBus.dispatch(EventType.ADD_TODO, { id: 1, text: 'Learn TypeScript' });
// or use the actions with typescript hint
eventBus.actions.addTodo({ id: 2, text: 'Learn Event Bus' });
// or use actions with the enum / const
eventBus.actions[EventType.ADD_TODO]({ id: 3, text: 'Learn React' });
// Unsubscribe from the event
setTimeout(() => {
subscription.unsubscribe();
}, 0);- 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>
}|
Chua Kang Ming |