@kambing86/event-bus-ts
v1.0.0
Published
event bus for typescript and react
Downloads
4
Maintainers
Readme
npm install --save-dev @kambing86/event-bus-ts
- add
@kambing86/event-bus-ts
by 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>();
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>
}
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>
}