File size: 1,756 Bytes
a21c316 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | import { useState, useCallback, useEffect } from 'react';
import { createPortal } from 'react-dom';
import Toast, { ToastType } from './Toast';
export interface ToastItem {
id: string;
message: string;
type: ToastType;
duration?: number;
}
let toastCounter = 0;
let addToastExternal: ((message: string, type: ToastType, duration?: number) => void) | null = null;
export const showToast = (message: string, type: ToastType = 'info', duration: number = 3000) => {
if (addToastExternal) {
addToastExternal(message, type, duration);
} else {
console.warn('ToastContainer not mounted');
}
};
const ToastContainer = () => {
const [toasts, setToasts] = useState<ToastItem[]>([]);
const addToast = useCallback((message: string, type: ToastType, duration?: number) => {
const id = `toast-${Date.now()}-${toastCounter++}`;
setToasts(prev => [...prev, { id, message, type, duration }]);
}, []);
const removeToast = useCallback((id: string) => {
setToasts(prev => prev.filter(t => t.id !== id));
}, []);
useEffect(() => {
addToastExternal = addToast;
return () => {
addToastExternal = null;
};
}, [addToast]);
return createPortal(
<div className="fixed top-24 right-8 z-[200] flex flex-col gap-3 pointer-events-none">
<div className="flex flex-col gap-3 pointer-events-auto">
{toasts.map(toast => (
<Toast
key={toast.id}
{...toast}
onClose={removeToast}
/>
))}
</div>
</div>,
document.body
);
};
export default ToastContainer;
|