Creare una toast notification in React e react-toastify

Mattepuffo's logo
Creare una toast notification in React e react-toastify

Creare una toast notification in React e react-toastify

react-toastify è una piccola libreria per React per la creazione di toast notification.

Facile da usare, potete anche trovare vari esempi sul sito con il codice da usare.

Potete installarla tramite npm:

npm install react-toastify

Qui sotto un esempio:

import './App.css';
import {toast, ToastContainer} from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function App() {

    const notify = () => {
        toast.success('ALERT!', {
            position: "top-right",
            autoClose: 3000,
            hideProgressBar: false,
            closeOnClick: true,
            pauseOnHover: true,
            draggable: true,
            progress: undefined,
            theme: "dark",
        });
    };

    return (
        <div className="App">
            <button type="button" onClick={notify}>
                Press
            </button>

            <ToastContainer />
        </div>
    );
}

export default App;

Io ho usato l'emitter, ma volendo potete impostare le varie opzioni direttamente nel contenitore.

Enjoy!


Condividi

Commentami!