Skip to content

Instantly share code, notes, and snippets.

@JLarky
Last active September 5, 2020 03:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JLarky/76a5b2ea3bf25965373b9bd5a26e9606 to your computer and use it in GitHub Desktop.
Save JLarky/76a5b2ea3bf25965373b9bd5a26e9606 to your computer and use it in GitHub Desktop.
use-event-listener for eventemitter3; unfortunately it has `any` for event arguments
import EventEmitter from 'eventemitter3';
import React from 'react';
export function useEventsListener<T extends string>(
eventEmitter: EventEmitter,
eventsList: readonly T[],
eventsListener: (event: T, args: ...any[]) => void
) {
// deep compare array
// eslint-disable-next-line react-hooks/exhaustive-deps
const eventsListMemo = React.useMemo(() => eventsList, eventsList);
const savedHandler = React.useRef<typeof eventsListener>();
React.useEffect(() => {
savedHandler.current = eventsListener;
}, [eventsListener]);
React.useEffect(() => {
const release = eventsListMemo.map((event) => {
const listener = (...args: any[]) => {
savedHandler.current?.(event, ...args);
};
eventEmitter.on(event, listener);
return () => {
eventEmitter.off(event, listener);
};
});
return () => {
release.map((x) => x());
};
}, [eventEmitter, eventsListMemo]);
}
/* Example
useEventsListener(emitter, ['changed1', 'changed2'], (type, info: string) => {
if (type === 'changed1') {
console.log(type, info);
} else if (type === 'changed2') {
console.log(type, info);
}
});
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment