Notes

// Toast.js
import React, { useEffect } from 'react';
import './Toast.css'; // CSS for the Toast

const Toast = ({ message, type, onClose }) => {
useEffect(() => {
// Automatically close the toast after 3 seconds (or whatever duration you choose)
const timer = setTimeout(() => {
onClose();
}, 3000); // 3 seconds
return () => clearTimeout(timer);
}, [onClose]);

return (
<div className={`toast ${type}`}>
<span>{message}</span>
<button className="close-btn" onClick={onClose}>
&times;
</button>
</div>
);
};

export default Toast;





// ToastContainer.js
import React, { useState } from 'react';
import Toast from './Toast';
import './ToastContainer.css';

const ToastContainer = () => {
const [toasts, setToasts] = useState([]);

// Function to add a new toast to the state
const addToast = (message, type = 'info') => {
const id = new Date().getTime(); // Unique ID based on time
setToasts([...toasts, { id, message, type }]);
};

// Function to remove a toast by ID
const removeToast = (id) => {
setToasts(toasts.filter((toast) => toast.id !== id));
};

return (
<div className="toast-container">
{toasts.map((toast) => (
<Toast
key={toast.id}
message={toast.message}
type={toast.type}
onClose={() => removeToast(toast.id)}
/>
))}
</div>
);
};

export default ToastContainer;






/* Toast.css */
.toast {
background-color: #333;
color: #fff;
padding: 15px;
border-radius: 5px;
font-size: 14px;
min-width: 250px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
opacity: 0;
transform: translateY(-20px);
transition: opacity 0.4s ease, transform 0.4s ease;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
margin-bottom: 10px;
}

/* Toast Animation for Showing */
.toast.show {
opacity: 1;
transform: translateY(0);
}

/* Toast Animation for Hiding */
.toast.hide {
opacity: 0;
transform: translateY(20px);
}

/* Close Button */
.toast .close-btn {
background: transparent;
border: none;
color: #fff;
font-size: 20px;
cursor: pointer;
padding: 5px;
margin-left: 10px;
}

/* Success Toast */
.toast.success {
background-color: #28a745; /* Green */
}

/* Error Toast */
.toast.error {
background-color: #dc3545; /* Red */
}

/* Warning Toast */
.toast.warning {
background-color: #ffc107; /* Yellow */
}

/* Info Toast */
.toast.info {
background-color: #17a2b8; /* Blue */
}




/* ToastContainer.css */
.toast-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 10px;
align-items: flex-end; /* Align to the right */
}



// App.js
import React from 'react';
import ToastContainer from './ToastContainer';
import './App.css';

function App() {
const toastContainerRef = React.useRef();

// Function to trigger toasts from anywhere in the app
const triggerToast = (message, type) => {
toastContainerRef.current.addToast(message, type);
};

return (
<div className="App">
<h1>React Toast Notifications</h1>

{/* Buttons to trigger different types of toasts */}
<button onClick={() => triggerToast('This is a success message!', 'success')}>
Success Toast
</button>
<button onClick={() => triggerToast('This is an error message!', 'error')}>
Error Toast
</button>
<button onClick={() => triggerToast('This is a warning message!', 'warning')}>
Warning Toast
</button>
<button onClick={() => triggerToast('This is an informational message!', 'info')}>
Info Toast
</button>

{/* Toast container */}
<ToastContainer ref={toastContainerRef} />
</div>
);
}

export default App;