Adding notifications with React-Toastify

Yesterday I came across this npm while searching for different ways to display alerts in my React app. It's react-toastify! In their own words:
" React-Toastify allows you to add notifications to your app with ease. No more nonsense!"

That's no joke. Installation and integration was a breeze and the notifications are fun and customizable.

Getting started

For this walkthrough, I started up a react application with:

create-react-app toastify-example

and installed Toastify by running:

npm install --save react-toastify

Toastify at work

Make sure you add the imports at the top of your file:

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

Then simply add the following:

 const notify = () => toast("Here is my notification!");    return (      <div className="App">       <header className="App-header">        <button onClick={notify}>Click Me!</button>        <ToastContainer         position="top-center"        autoClose={5000}        hideProgressBar={false}        newestOnTop={false}        closeOnClick        rtl={false}        pauseOnFocusLoss        draggable        pauseOnHover        />      </header>    </div>  ); }

The additional props are customizable and examples are available on the demo page.

The product:

Example usage in form submission

I personally implemented this as confirmation for a contact form submission. Simply add toast into the submitHandler:

submitHandler = (event) => {    event.preventDefault()    event.currentTarget.reset();    toast.success("Thank you for contacting us!");  }

Note: toast.success in the example above is one of the presets for styling.

Conclusion

React-Toastify is a neat and simple way to add notifications to your site.

P.S. It's also mobile-friendly with swipe to close.