stash/ui/v2.5/src/hooks/Toast.tsx

import React, { useEffect, useState, useContext, createContext } from "react";
import { Toast } from "react-bootstrap";

interface IToast {
  header?: string;
  content: JSX.Element | string;
  delay?: number;
  variant?: "success" | "danger" | "warning" | "info";
}
interface IActiveToast extends IToast {
  id: number;
}

let toastID = 0;
const ToastContext = createContext<(item: IToast) => void>(() => {});

export const ToastProvider: React.FC = ({ children }) => {
  const [toasts, setToasts] = useState<IActiveToast[]>([]);

  const removeToast = (id: number) =>
    setToasts(toasts.filter(item => item.id !== id));

  const toastItems = toasts.map(toast => (
    <Toast
      autohide
      key={toast.id}
      onClose={() => removeToast(toast.id)}
      className={toast.variant ?? "success"}
      delay={toast.delay ?? 5000}
    >
      <Toast.Header>
        <span className="mr-auto">{toast.header ?? "Stash"}</span>
      </Toast.Header>
      <Toast.Body>{toast.content}</Toast.Body>
    </Toast>
  ));

  const addToast = (toast: IToast) =>
    setToasts([...toasts, { ...toast, id: toastID++ }]);

  return (
    <ToastContext.Provider value={addToast}>
      {children}
      <div className="toast-container row">{toastItems}</div>
    </ToastContext.Provider>
  );
};

function createHookObject(toastFunc: (toast: IToast) => void) {
  return {
    success: toastFunc,
    error: (error: Error) => {
      // eslint-disable-next-line no-console
      console.error(error.message);
      toastFunc({
        variant: "danger",
        header: "Error",
        content: error.message ?? error.toString()
      });
    }
  };
}

const useToasts = () => {
  const setToast = useContext(ToastContext);
  const [hookObject, setHookObject] = useState(createHookObject(setToast));
  useEffect(() => setHookObject(createHookObject(setToast)), [setToast]);

  return hookObject;
};

export default useToasts;