eventBus.ts

import * as React from 'react';
import mitt from 'mitt';

interface IEventsMap {
  modalOpen: {
    content: React.ReactNode;
    url?: string;
  };
  modalClose: null;

  commentCreated: {
    id: string;
  };
}

type IEventArguments<T extends keyof IEventsMap> = null extends IEventsMap[T]
  ? []
  : [IEventsMap[T]];

const eventBus = mitt() as {
  emit<T extends keyof IEventsMap>(e: T, ...p: IEventArguments<T>): void;
  on<T extends keyof IEventsMap>(
    e: T,
    f: (...p: IEventArguments<T>) => void,
  ): void;
  off<T extends keyof IEventsMap>(
    e: T,
    f: (...p: IEventArguments<T>) => void,
  ): void;
};

export function emit<T extends keyof IEventsMap>(
  event: T,
  ...payload: IEventArguments<T>
) {
  if (typeof window !== 'undefined') {
    eventBus.emit(event, ...payload);
  } else {
    console.warn('emit called on server');
  }
}

export function useEventBus<T extends keyof IEventsMap>(
  eventName: T,
  handler: (...payload: IEventArguments<T>) => void,
) {
  React.useEffect(() => {
    eventBus.on(eventName, handler);
    return () => eventBus.off(eventName, handler);
  }, [eventName, handler]);
}

This is code companion from my post EventBus in React Applications

This is code companion from my post EventBus in React Applications

Thank you!