A versatile and lightweight event bus implementation with a React hook for easy integration.
npm install @pivanov/event-busA versatile and lightweight event bus implementation with a React hook for easy integration.
Install the package using npm:
``bash`
npm install @pivanov/event-bus
Or using yarn:
`bash`
yarn add @pivanov/event-bus
First, import the useEventBus and busDispatch functions from the package. Define your event interface, then use the useEventBus hook to subscribe to events and busDispatch to dispatch events.
`tsx
import React from 'react';
import { useEventBus, busDispatch } from '@pivanov/event-bus';
// Define your event interface
interface MyEventBusMessage {
topic: string;
message: string;
}
export const ComponentA = () => {
// Dispatch '@@-message' when the button is clicked
const handleClick = () => {
busDispatch
};
return (
);
};
export const ComponentB = () => {
const [message, setMessage] = useState('');
// Subscribe to topic '@@-message'
useEventBus
console.log('Message received:', message);
setMessage(message);
});
return (
<>
Message: {message}
<>
);
};
`
- filter: The event topic to subscribe to, or a function that returns true for events to handle.
- callback: The function to call when an event of the specified type is dispatched.
- Returns a function to unsubscribe.
- topic: The event topic to dispatch.
- message: The message payload for the event.
- topic: The event topic to subscribe to.
- callback: The function to call when an event of the specified topic is dispatched.
- deps: Optional array of dependencies for the useEffect hook.
This package is written in TypeScript and provides full type definitions. You can define your own event interfaces to ensure type safety when using the event bus. Your event interface should extend the following structure:
`typescript``
interface YourEventInterface {
topic: string;
message: unknown;
}
MIT
Contributions are welcome! Please feel free to submit a Pull Request.
To run the tests for this package, use the following command: