コンテキストのセットアップ

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}
                             removeAlert(alert.id)}>X
                        
                    ))
                }
            
        
    )
}

トースト通知の 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;
}

トースト コンテキストの提供

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

            
Hello Profile
            Show Toast
        
    )
}

export default Profile