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 ({children} ) }{ alert.map((alert) => ({alert.message})) }
/* 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; }
// 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(, )
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 () } export default ProfileHello Profile
免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。
Copyright© 2022 湘ICP备2022001581号-3