react-hot-toast/src/core/toast.ts

Smoking hot React Notifications. Lightweight, customizable and beautiful by default.

import {
  Renderable,
  Toast,
  ToastOptions,
  ToastType,
  DefaultToastOptions,
  ValueOrFunction,
  resolveValue,
} from './types';
import { genId } from './utils';
import { dispatch, ActionType } from './store';

type Message = ValueOrFunction<Renderable, Toast>;

type ToastHandler = (message: Message, options?: ToastOptions) => string;

const createToast = (
  message: Message,
  type: ToastType = 'blank',
  opts?: ToastOptions
): Toast => ({
  createdAt: Date.now(),
  visible: true,
  dismissed: false,
  type,
  ariaProps: {
    role: 'status',
    'aria-live': 'polite',
  },
  message,
  pauseDuration: 0,
  ...opts,
  id: opts?.id || genId(),
});

const createHandler =
  (type?: ToastType): ToastHandler =>
  (message, options) => {
    const toast = createToast(message, type, options);
    dispatch({ type: ActionType.UPSERT_TOAST, toast });
    return toast.id;
  };

const toast = (message: Message, opts?: ToastOptions) =>
  createHandler('blank')(message, opts);

toast.error = createHandler('error');
toast.success = createHandler('success');
toast.loading = createHandler('loading');
toast.custom = createHandler('custom');

toast.dismiss = (toastId?: string) => {
  dispatch({
    type: ActionType.DISMISS_TOAST,
    toastId,
  });
};

toast.remove = (toastId?: string) =>
  dispatch({ type: ActionType.REMOVE_TOAST, toastId });

toast.promise = <T>(
  promise: Promise<T> | (() => Promise<T>),
  msgs: {
    loading: Renderable;
    success?: ValueOrFunction<Renderable, T>;
    error?: ValueOrFunction<Renderable, any>;
  },
  opts?: DefaultToastOptions
) => {
  const id = toast.loading(msgs.loading, { ...opts, ...opts?.loading });

  if (typeof promise === 'function') {
    promise = promise();
  }

  promise
    .then((p) => {
      const successMessage = msgs.success
        ? resolveValue(msgs.success, p)
        : undefined;

      if (successMessage) {
        toast.success(successMessage, {
          id,
          ...opts,
          ...opts?.success,
        });
      } else {
        toast.dismiss(id);
      }
      return p;
    })
    .catch((e) => {
      const errorMessage = msgs.error ? resolveValue(msgs.error, e) : undefined;

      if (errorMessage) {
        toast.error(errorMessage, {
          id,
          ...opts,
          ...opts?.error,
        });
      } else {
        toast.dismiss(id);
      }
    });

  return promise;
};

export { toast };