@accelint/bus
Installation
npm install @accelint/bus
Usage
type MyEvent = Payload<'some-event', {some: string}>;
// can also be a union of multiple events
type FooEvent = Payload<'foo', { isCool: boolean }>;
type BarEvent = Payload<'bar', { position: [number, number] }>;
// gets passed in as the generic in place of MyEvent in examples below
type MyEvents = MyEvent | FooEvent | BarEvent;
Vanilla
import { Broadcast } from '@accelint/bus';
const bus = Broadcast.getInstance<MyEvent>();
const off = bus.on('some-event', (payload) => {
console.log(payload);
});
bus.emit('some-event', {
some: 'payload',
});
off(); // unsubscribe from event
React
import { useEvent, useOn } from '@accelint/bus';
function MyComponent(props) {
const { foo } = props;
const [thing, setMyThing] = useState(false);
const emit = useOn<MyEvent>('some-event');
useEvent<MyEvent>('some-event', (payload) => {
// this callback is stable and you can access props / state without
// the values becoming stale. Event is automatically cleaned up.
console.log(foo);
console.log(thing);
console.log(payload);
});
function onClick() {
emit({ some: 'payload' })
}
return (
<button onClick={onClick}>Fire Event</button>
)
}
import { useBus } from '@accelint/bus';
function MyComponent(props) {
const { foo } = props;
const [thing, setMyThing] = useState(false);
const { useOn, useEvent } = useBus<MyEvent>();
const emit = useEmit('some-event');
useEvent('some-event', (payload) => {
// this callback is stable and you can access props / state without
// the values becoming stale. Event is automatically cleaned up.
console.log(foo);
console.log(thing);
console.log(payload);
});
function onClick() {
emit({ some: 'payload' })
}
return (
<button onClick={onClick}>Fire Event</button>
)
}