React: How to implement a toast notification system?

1import { useState, useCallback, createContext, useContext } from "react";
2
3type Toast = {
4  id: string;
5  message: string;
6  type: "success" | "error" | "info";
7};
8
9const ToastContext = createContext<{
10  toasts: Toast[];
11  addToast: (message: string, type: Toast["type"]) => void;
12  removeToast: (id: string) => void;
13}>(null!);
14
15export function ToastProvider({ children }) {
16  const [toasts, setToasts] = useState<Toast[]>([]);
17
18  const addToast = useCallback((message: string, type: Toast["type"]) => {
19    const id = Date.now().toString();
20    setToasts(prev => [...prev, { id, message, type }]);
21    setTimeout(() => removeToast(id), 3000);
22  }, []);
23
24  const removeToast = useCallback((id: string) => {
25    setToasts(prev => prev.filter(t => t.id !== id));
26  }, []);
27
28  return (
29    <ToastContext.Provider value={{ toasts, addToast, removeToast }}>
30      {children}
31      <ToastContainer />
32    </ToastContext.Provider>
33  );
34}
35
36function ToastContainer() {
37  const { toasts, removeToast } = useContext(ToastContext);
38
39  return (
40    <div className="toast-container">
41      {toasts.map(toast => (
42        <div
43          key={toast.id}
44          className={`toast toast-${toast.type}`}
45          onClick={() => removeToast(toast.id)}
46        >
47          {toast.message}
48        </div>
49      ))}
50    </div>
51  );
52}
53
54// Custom hook
55function useToast() {
56  const { addToast } = useContext(ToastContext);
57  return {
58    success: (msg) => addToast(msg, "success"),
59    error: (msg) => addToast(msg, "error"),
60    info: (msg) => addToast(msg, "info"),
61  };
62}
63
64// Usage
65function App() {
66  return (
67    <ToastProvider>
68      <MyApp />
69    </ToastProvider>
70  );
71}
72
73function SaveButton() {
74  const toast = useToast();
75
76  const handleSave = async () => {
77    try {
78      await save();
79      toast.success("Saved successfully");
80    } catch (err) {
81      toast.error("Failed to save");
82    }
83  };
84
85  return <button onClick={handleSave}>Save</button>;
86}