React Toastify - quotehound/v2QHForms GitHub Wiki
Notification system for usre interaction - will use in group with React Hook Forms
npm install --save react-toastify
Remember to render the ToastContainer once in your application tree. If you can't figure out where to put it, rendering it in the application root would be the best bet.
import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
// minified version is also included
// import 'react-toastify/dist/ReactToastify.min.css';
function App(){
const notify = () => toast("Wow so easy !");
return (
<div>
<button onClick={notify}>Notify !</button>
<ToastContainer />
</div>
);
}
By default, all the toasts will be positioned on the top right of your browser. If a position is set on a toast
, the one defined on ToastContainer will be replaced.
The following values are allowed: top-right, top-center, top-left, bottom-right, bottom-center, bottom-left
For convenience, toast
exposes a POSITION property to avoid any typos.
import React from 'react';
import { toast } from 'react-toastify';
function Example() {
const notify = () => {
toast("Default Notification !");
toast.success("Success Notification !", {
position: toast.POSITION.TOP_CENTER
});
toast.error("Error Notification !", {
position: toast.POSITION.TOP_LEFT
});
toast.warn("Warning Notification !", {
position: toast.POSITION.BOTTOM_LEFT
});
toast.info("Info Notification !", {
position: toast.POSITION.BOTTOM_CENTER
});
toast("Custom Style Notification with css class!", {
position: toast.POSITION.BOTTOM_RIGHT,
className: 'foo-bar'
});
};
return <button onClick={notify}>Notify</button>;
}
The autoClose prop accept a duration in milliseconds or false.
import React from 'react';
import { ToastContainer } from 'react-toastify';
// close toast after 8 seconds
const App = () => (
<ToastContainer autoClose={8000} />
);
import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
function Example() {
const closeAfter15 = () => toast("Will close after 15s", { autoClose: 15000 });
const closeAfter7 = () => toast("Will close after 7s", { autoClose: 7000 });
return (
<div>
<button onClick={closeAfter15}>Close after 15 seconds</button>
<button onClick={closeAfter7}>Close after 7 seconds</button>
<ToastContainer autoClose={8000} />
</div>
);
}
<ToastContainer autoClose={false} />
toast("hello", {
autoClose: false
})
An id is returned each time you display a toast, use it to remove a given toast programmatically by calling toast.dismiss(id)
import React from 'react';
import { toast } from 'react-toastify';
function Example(){
const toastId = React.useRef(null);
const notify = () => toastId.current = toast("Lorem ipsum dolor");
const dismiss = () => toast.dismiss(toastId.current);
const dismissAll = () => toast.dismiss();
return (
<div>
<button onClick={notify}>Notify</button>
<button onClick={dismiss}>Dismiss</button>
<button onClick={dismissAll}>Dismiss All</button>
</div>
);
}