Frontend: toast notifications via a small event bus

2161 views

                  type Toast = { id: string; message: string; kind: 'success' | 'error' };
const listeners = new Set<(t: Toast) => void>();

export const toastBus = {
  on(fn: (t: Toast) => void) {
    listeners.add(fn);
    return () => listeners.delete(fn);
  },
  emit(toast: Toast) {
    for (const fn of listeners) fn(toast);
  }
};

I don’t want components depending on each other just to show a toast. A tiny event bus (or context) lets any part of the app emit a toast without wiring props through five layers. The important part is keeping the API small—something like show(message, kind) plus a provider that renders the UI. I auto-dismiss after a timeout but allow manual dismissal for accessibility. This keeps success/failure feedback consistent across the app and prevents every page from re-implementing its own notification UI.

Mateo Rodriguez

More from Mateo Rodriguez

Frontend: toast notifications via a small event bus

0 Comments

More from Mateo Rodriguez