A simple yet powerful event management system for TypeScript and JavaScript. Manage and emit events with ease while maintaining type safety.
- Type Safety: Written in TypeScript and supports type-safety out of the box.
- Wildcard Events: Listen to all emitted events using wildcards.
- Max Listeners Warning: Prevents memory leaks by warning about potential excessive listeners.
- Multiple Instances: Create multiple event emitters for different parts of your application.
Using npm:
npm install react-event-simple-emitter
Using yarn:
yarn add react-event-simple-emitter
import EventEmitter from 'react-event-simple-emitter';
By default, each EventEmitter instance will have a max listeners limit of 10.
const emitter = new EventEmitter();
Or with a custom limit:
const customEmitter = new EventEmitter(20);
emitter.on('sayHello', (name: string) => {
console.log(`Hello, ${name}!`);
});
emitter.emit('sayHello', 'Alice'); // Logs: Hello, Alice!
const myListener = (name: string) => {
console.log(`Goodbye, ${name}!`);
};
emitter.on('sayGoodbye', myListener);
emitter.off('sayGoodbye', myListener);
Listen to all events:
emitter.on('*', (event, ...args) => {
console.log(`Event "${event}" was emitted with arguments:`, args);
});
To change the max listeners at runtime:
emitter.setMaxListeners(50);
Remove all listeners for a specific event:
emitter.removeAllListeners('eventName');
Or remove all listeners for all events:
emitter.removeAllListeners();
Consider two React components ComponentA
and ComponentB
. To enable communication between them using the event emitter:
./service/eventEmitter.ts
import { EventEmitter } from 'path-to-your-event-emitter';
export const sharedEmitter = new EventEmitter();
ComponentA.tsx
import React from 'react';
import { sharedEmitter } from './eventEmitter';
const ComponentA: React.FC = () => {
const handleClick = () => {
sharedEmitter.emit('someEvent', 'Hello from ComponentA');
};
return <button onClick={handleClick}>Click me</button>;
};
ComponentB.tsx
import React, { useEffect } from 'react';
import { sharedEmitter } from './eventEmitter';
const ComponentB: React.FC = () => {
useEffect(() => {
const listener = (message: string) => {
console.log(message);
};
sharedEmitter.on('someEvent', listener);
// Cleanup when component unmounts or if listener changes
return () => {
sharedEmitter.off('someEvent', listener);
};
}, []);
return <div>ComponentB is listening...</div>;
};
In this setup, when the button in ComponentA is clicked, ComponentB listens to the event and logs the message "Hello from ComponentA".
-
on(event: string, listener: Function)
: Registers a listener for an event. -
emit(event: string, ...args: any[])
: Emit an event with or without arguments. -
off(event: string, listener: Function)
: Unregisters a listener from an event. -
removeAllListeners(event?: string)
: Removes all listeners for a specific event, or for all events if no event name is provided. -
setMaxListeners(count: number)
: Sets the maximum number of listeners that can be added to each event.
Feel free to dive in! Open an issue or submit PRs.
MIT © [Sinji Prasetio]