42 lines
1.1 KiB
JavaScript
42 lines
1.1 KiB
JavaScript
import Alert from "@mui/material/Alert";
|
|
import Snackbar from "@mui/material/Snackbar";
|
|
import { createContext, useCallback, useContext, useMemo, useState } from "react";
|
|
|
|
const ToastContext = createContext(null);
|
|
|
|
export function ToastProvider({ children }) {
|
|
const [toast, setToast] = useState(null);
|
|
|
|
const showToast = useCallback((message, severity = "info") => {
|
|
setToast({ message, severity });
|
|
}, []);
|
|
|
|
const value = useMemo(() => ({ showToast }), [showToast]);
|
|
|
|
return (
|
|
<ToastContext.Provider value={value}>
|
|
{children}
|
|
<Snackbar
|
|
anchorOrigin={{ horizontal: "right", vertical: "top" }}
|
|
autoHideDuration={3200}
|
|
onClose={() => setToast(null)}
|
|
open={Boolean(toast)}
|
|
>
|
|
{toast ? (
|
|
<Alert onClose={() => setToast(null)} severity={toast.severity} variant="filled">
|
|
{toast.message}
|
|
</Alert>
|
|
) : null}
|
|
</Snackbar>
|
|
</ToastContext.Provider>
|
|
);
|
|
}
|
|
|
|
export function useToast() {
|
|
const context = useContext(ToastContext);
|
|
if (!context) {
|
|
throw new Error("useToast must be used inside ToastProvider");
|
|
}
|
|
return context;
|
|
}
|