Context Setup
src/context/ToastContext.js
import { createContext, useCallback, useContext, useEffect, useState } from "react";
const CreateAlertBox = createContext();
export const useCreateAlert = () => useContext(CreateAlertBox);
const AlertType = ['error', 'success', 'info', 'warning'];
export const CreateAlertBoxProvider = ({ children }) => {
const [alert, setAlert] = useState([]);
const createAlert = useCallback((message, type = 'warning') => {
if (!AlertType.includes(type)) return;
setAlert((prevAlert) => [
...prevAlert,
{ id: Date.now(), message, type }
])
}, [])
const removeAlert = useCallback((id) => {
setAlert((prevAlert) => prevAlert.filter((alert) => alert.id !== id));
}, [])
return (
<CreateAlertBox.Provider value={{ createAlert, removeAlert }}>
{children}
<div className="toast-container">
{
alert.map((alert) => (
<div key={alert.id} className={`toast toast-${alert.type}`}>
{alert.message}
<button onClick={() => removeAlert(alert.id)}>X</button>
</div>
))
}
</div>
</CreateAlertBox.Provider>
)
}
CSS for Toast Notifications
/* src/styles/toast.css */
.toast-container {
position: fixed;
top: 1rem;
right: 1rem;
z-index: 9999;
}
.toast {
background-color: #333;
color: #fff;
padding: 1rem;
margin-bottom: 1rem;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: space-between;
}
.toast-info {
background-color: #007bff;
}
.toast-success {
background-color: #28a745;
}
.toast-warning {
background-color: #ffc107;
}
.toast-error {
background-color: #dc3545;
}
.toast button {
background: none;
border: none;
color: #fff;
cursor: pointer;
margin-left: 1rem;
}
Providing the Toast Context
// src/main.js
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { RouterProvider } from 'react-router-dom'
import { router } from './router.jsx'
import { CreateAlertBoxProvider } from './context/toastcontext.jsx'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<CreateAlertBoxProvider>
<RouterProvider router={router}>
<App />
</RouterProvider>
</CreateAlertBoxProvider>
</React.StrictMode>,
)
Using the Toast Context in Components
import React, { useContext, useEffect } from 'react'
import { UserContext } from '../context/usercontext'
import { useCreateAlert } from '../context/toastcontext'
const Profile = () => {
const { user } = useContext(UserContext)
const { createAlert } = useCreateAlert();
const showToast = () => {
try {
createAlert("Deal created successfully", 'success')
} catch (error) {
createAlert('This is an info toast!', 'error');
}
};
return (
<div className="App">
<p>Hello Profile</p>
<button onClick={showToast}>Show Toast</button>
</div>
)
}
export default Profile
Top comments (0)