69 lines
No EOL
1.9 KiB
JavaScript
69 lines
No EOL
1.9 KiB
JavaScript
import { createContext, useContext, useState, useCallback } from 'react';
|
|
import Toast from './Toast';
|
|
import './ToastContainer.css';
|
|
|
|
const ToastContext = createContext();
|
|
|
|
export const useToast = () => {
|
|
const context = useContext(ToastContext);
|
|
if (!context) {
|
|
throw new Error('useToast must be used within a ToastProvider');
|
|
}
|
|
return context;
|
|
};
|
|
|
|
export const ToastProvider = ({ children }) => {
|
|
const [toasts, setToasts] = useState([]);
|
|
|
|
const addToast = useCallback((message, type = 'info', duration = 4000) => {
|
|
const id = Date.now() + Math.random();
|
|
const toast = { id, message, type, duration };
|
|
|
|
setToasts(prev => [...prev, toast]);
|
|
|
|
return id;
|
|
}, []);
|
|
|
|
const removeToast = useCallback((id) => {
|
|
setToasts(prev => prev.filter(toast => toast.id !== id));
|
|
}, []);
|
|
|
|
const showSuccess = useCallback((message, duration) => addToast(message, 'success', duration), [addToast]);
|
|
const showError = useCallback((message, duration) => addToast(message, 'error', duration), [addToast]);
|
|
const showWarning = useCallback((message, duration) => addToast(message, 'warning', duration), [addToast]);
|
|
const showInfo = useCallback((message, duration) => addToast(message, 'info', duration), [addToast]);
|
|
|
|
const value = {
|
|
addToast,
|
|
removeToast,
|
|
showSuccess,
|
|
showError,
|
|
showWarning,
|
|
showInfo
|
|
};
|
|
|
|
return (
|
|
<ToastContext.Provider value={value}>
|
|
{children}
|
|
<ToastContainer toasts={toasts} onRemove={removeToast} />
|
|
</ToastContext.Provider>
|
|
);
|
|
};
|
|
|
|
const ToastContainer = ({ toasts, onRemove }) => {
|
|
if (toasts.length === 0) return null;
|
|
|
|
return (
|
|
<div className="toast-container">
|
|
{toasts.map(toast => (
|
|
<Toast
|
|
key={toast.id}
|
|
message={toast.message}
|
|
type={toast.type}
|
|
duration={toast.duration}
|
|
onClose={() => onRemove(toast.id)}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
}; |