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!
javascript react react-toastify
Commentami!