」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 在 React 中使用特定類型和上下文 API 設定 Toast 自訂通知

在 React 中使用特定類型和上下文 API 設定 Toast 自訂通知

發佈於2024-11-04
瀏覽:396

Setting Up Toast Custom Notifications in React with Specific Types and Context API

上下文設定

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}
)) }
) }

Toast 通知的 CSS

/* 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;
}

提供 Toast 上下文

// 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(
  ,
)

在元件中使用 Toast 上下文

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 (
        

Hello Profile

) } export default Profile
版本聲明 本文轉載於:https://dev.to/akash32755/setting-up-toast-custom-notifications-in-react-with-specific-types-and-context-api-40kg?1如有侵犯,請聯絡study_golang @163.com刪除
最新教學 更多>
  • 如何使用字串插值將 CSS 屬性設定為 SASS 中的 mixin 值?
    如何使用字串插值將 CSS 屬性設定為 SASS 中的 mixin 值?
    將 SASS Mixin 值設為 CSS 屬性建立通用邊距/填入 mixin 時,可能需要將 CSS 屬性設為 mixin 值。為此,需要使用字串插值。 CSS 屬性的字串插值要使用變數作為 CSS 屬性名稱,需要字串插值 (#{$var})。 範例下面的 mixin 示範如何使用字串設定 CSS ...
    程式設計 發佈於2024-11-08
  • 如何解決 Webpack 和 Babel 的「You May Need an Appropriate Loader」錯誤?
    如何解決 Webpack 和 Babel 的「You May Need an Appropriate Loader」錯誤?
    解決Webpack 和Babel 的“您可能需要合適的加載器”錯誤遇到此錯誤意味著Webpack 需要合適的加載器來解釋文件。在這個特定實例中,Babel 將用於 ES6 編譯。若要解決此問題,請依照下列步驟操作:安裝ES2015 預設:npm install babel-preset-es2015...
    程式設計 發佈於2024-11-08
  • 執行上下文和呼叫堆疊
    執行上下文和呼叫堆疊
    为顶级代码创建全局执行上下文,即不在任何 fn 内的代码。因此,首先执行 fn 之外的代码。 fn-decln/exprsn 的 fn 主体内的代码仅在调用时执行。 执行上下文(EC) JS执行的环境。 存储一些要执行的代码的所有必要信息,例如局部变量、传递给 fn 的 args。 ...
    程式設計 發佈於2024-11-08
  • 是否有必要將字串傳遞給 setTimeout?
    是否有必要將字串傳遞給 setTimeout?
    向setTimeout 傳遞字串:一個必要性問題由於效能問題、潛在的安全風險及其不建議使用,許多開發人員不贊成向setTimeout 傳遞字串的做法地位。然而,在極少數情況下,這種語法可能是有益的。 棄用論點setTimeout 和 setInterval 的傳統語法涉及傳遞一個表示要執行的程式碼的...
    程式設計 發佈於2024-11-08
  • Hours是一個環境變量,我將使用ENV。冷靜冷靜,我先告訴你一件事
    Hours是一個環境變量,我將使用ENV。冷靜冷靜,我先告訴你一件事
    我們總是很匆忙,想要盡快開發,我們經常會採用舊習慣並構建舊軟體,我們可以改進的一個項目是這個叫做環境的小東西,讓我們進一步了解一下。 首先,我想在這裡展示 Laravel 配置概念的重點,我不會擔心其餘的模式,例如資源或其他類似的模式。 1 - 讓我們尋求知識! 不久前,我聽說我無法在我的瘋...
    程式設計 發佈於2024-11-08
  • 要記住的 useState:將變數儲存在 React 的記憶體中!
    要記住的 useState:將變數儲存在 React 的記憶體中!
    在 React 的世界中,管理元件的狀態對於建立動態和互動式應用程式至關重要。最強大的工具之一是 useState 鉤子。 在 React 世界中,狀態管理是創建互動式和動態應用程式的基石之一。 useState 是 React 中最常用的鉤子之一,是管理元件狀態的有效方法。在本文中,我們將研究 ...
    程式設計 發佈於2024-11-08
  • 實現訂單處理系統:部分分散式追蹤和日誌記錄
    實現訂單處理系統:部分分散式追蹤和日誌記錄
    1. Introduction and Goals Welcome to the fifth installment of our series on implementing a sophisticated order processing system! In our prev...
    程式設計 發佈於2024-11-08
  • 如何在不同瀏覽器中準確測量調整大小後的圖片的原始尺寸?
    如何在不同瀏覽器中準確測量調整大小後的圖片的原始尺寸?
    跨瀏覽器揭示客戶端調整大小圖像的原始尺寸確定已在客戶端調整大小的圖像的真實尺寸side 是許多Web 開發場景的關鍵任務。無論您是調整影像以實現響應式佈局,還是向使用者顯示原始尺寸,找到一個跨瀏覽器一致工作的可靠解決方案至關重要。 選項 1:釋放 OffsetWidth 和 OffsetHeight...
    程式設計 發佈於2024-11-08
  • Python什麼時候會遇到「FileNotFoundError: No Such File or Directory」?
    Python什麼時候會遇到「FileNotFoundError: No Such File or Directory」?
    FileNotFoundError 疑難排解:沒有這樣的檔案或目錄 嘗試開啟檔案時,您可能會遇到「FileNotFoundError:[Errno 2&]嘗試開啟檔案時,您可能會遇到「FileNotFoundError:[Errno 2&]嘗試開啟檔案時,您可能會遇到「FileNotFoundErr...
    程式設計 發佈於2024-11-08
  • 如何透過限制使用者對其自己創建的內容的存取來保護 MySQL 資料庫?
    如何透過限制使用者對其自己創建的內容的存取來保護 MySQL 資料庫?
    透過限制對使用者建立的資料庫的存取來保護MySQL 資料庫在多用戶MySQL 設定中,確保資料安全至關重要。一個常見的挑戰是允許使用者建立資料庫,同時限制他們只能存取自己創建的資料庫。 為了解決此問題,MySQL 提供了一種使用通配符資料庫名稱的細緻方法。解決方案不是授予特定資料庫的權限,而是授予具...
    程式設計 發佈於2024-11-08
  • Alura 的免費 HTML 和 CSS 挑戰:建立 Netflix 副本
    Alura 的免費 HTML 和 CSS 挑戰:建立 Netflix 副本
    7 天 HTML 和 CSS 代码是 Alura 为您提供的免费在线练习前端精髓的机会。 在 7 天的时间里,您将面临复制 Netflix 电影和剧集页面布局的挑战,应用从“div”、“section”等基本概念、CSS 中的图像内联和测量到更高级技术的所有内容例如 Flexbox 和 Grid。 ...
    程式設計 發佈於2024-11-08
  • 讓您在 4 年內成為更快的 AI 工程師的工具
    讓您在 4 年內成為更快的 AI 工程師的工具
    在当今科技和创新驱动的世界,对人工智能工程师的需求很高。根据 BlueTree 的统计数据,到 2030 年,人工智能行业预计将增长近 20 倍。这种飙升的需求伴随着对更多人工智能工程师的需求。 在本文中,我们将探讨可以让您在执行 AI 工程任务时脱颖而出的 6 种顶级工具,以及它们如何帮助您更快地...
    程式設計 發佈於2024-11-08
  • 如何從 Golang 程式設定 ulimit -n 而不影響全域限制?
    如何從 Golang 程式設定 ulimit -n 而不影響全域限制?
    從Golang 程式設定ulimit -nQ: 如何從Golang 程式中設定ulimit -n 以將其限制在A:要從Golang 程式設定ulimit -n,可以使用下列步驟:package main import ( "fmt" "syscall&q...
    程式設計 發佈於2024-11-08
  • 當存在多個網路卡時,如何限制 Go 的 HTTP 用戶端的 IP 位址?
    當存在多個網路卡時,如何限制 Go 的 HTTP 用戶端的 IP 位址?
    如何限制HTTP 用戶端的IP 位址Go 的http.Client 可以實現高效率的HTTP 要求,但是如果你的系統包含多個個NIC? 自訂 IP 綁定要將 http.Client 綁定到特定 IP,請使用 net.Transport 實例修改其 Transport 欄位。這允許您指定net.Dia...
    程式設計 發佈於2024-11-08
  • 再見`JSON.stringify()`和`{...obj}`,你好`structedClone()`!
    再見`JSON.stringify()`和`{...obj}`,你好`structedClone()`!
    什麼是 StructuredClone()? StructuredClone() 是 2022 年引入的全域函數,可實現 JavaScript 物件的深度克隆。與 JSON.stringify() 和 JSON.parse() 等傳統方法難以應對複雜的結構和循環引用不同,structuredCl...
    程式設計 發佈於2024-11-08

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3