How can I create custom toast notifications in React?

How can I create custom toast notifications in React?

You can create custom toast notifications in React by using a combination of state management and CSS for styling. Would you like a code example?

Yes, please provide a code example!

Here's a simple example:

import React, { useState } from 'react';

const Toast = ({ message, onClose }) => {
    return (
        <div className='toast'>
            {message}
            <button onClick={onClose}>Close</button>
        </div>
    );
};

const App = () => {
    const [toastVisible, setToastVisible] = useState(false);

    const showToast = () => setToastVisible(true);
    const hideToast = () => setToastVisible(false);

    return (
        <div>
            <button onClick={showToast}>Show Toast</button>
            {toastVisible && <Toast message='This is a custom toast!' onClose={hideToast} />}
        </div>
    );
};

export default App;

This code creates a simple toast notification that appears when you click the button.

How can I customize the appearance of the toast?

You can customize the appearance by adding CSS styles to the .toast class. For example:

.toast {
    background-color: #333;
    color: white;
    padding: 10px;
    border-radius: 5px;
    position: fixed;
    top: 20px;
    right: 20px;
    transition: opacity 0.5s;
}

Feel free to adjust the styles to match your application's design!