Making Your ReactJS User Friendly with Toastify

Just a little while ago, I was working on a web app that allowed users to upload files to an S3 bucket that was assigned to them.

When the user uploaded a file and the backend service that uploaded the file to the S3 bucket returned a response, I defaulted to just displaying a simple text message that was colored either red or green to let the user know if the upload had succeeded.

This way seemed a bit ugly and outdated to me, which is why I started searching for alternatives. That’s when I stumbled upon an NPM package called React-Toastify.

What is React-Toastify?

To take a look at what the library is, we have to first understand what toast is. And no, I don’t mean the bread that you eat for breakfast.

A quick google search for what toast is in programming brings up the following answer:

“Toast” refers to a UI feature where an event causes a small text box to appear at the bottom of the screen. The behavior seems like a piece of bread emerging from a toaster.

So basically, it alerts the user when a certain event has happened. A toast can contain any kind of information that could be relevant for the user to let them know what and why something has occured.

It originated in Android development but since has emerged in other languages and frameworks, such as ReactJS.

The React-Toastify package allows the developer to show toasts to display a message and piece of information to the user for a certain period of time.

From the NPM package page

The great thing about React-Toastify is that it is very easy to include in your code so that giving the user a response is quick and simple. No need to create something by yourself.

How to use React-Toastify?

Well first off we need to install the npm package in our react project:

npm i react-toastify

After that, to get started, all you need is to include a ToastContainer and a notify method to show the toast container.

The ToastContainer is just a simple component, which you can write text or even custom JSX elements in to customize the toast even more.

Let me show you how to use the ToastContainer in a simple example:

In the div, we have a ToastContainer, which serves as a placeholder for the the toast to be shown. When the button is clicked, the toast method is called to notify the user with toast saying “Wow so easy!”.

There are even different kinds of types of toast methods that you can call. You have the choice of showing the following types:

• toast.info(…)
• toast.error(…)
• toast.success(…)
• toast.warning(…)
• toast.dark(…)

Each of these methods will show the toast in a different color, so that the user can directly tell what has happened is either ok, somewhat ok, or bad without having to read the message inside.

You can even tell the toast container where it should show, having the options of showing it in:

• top-left
• top-right
• top-center
• bottom-left
• bottom-right
• bottom-center

of the browser. To do this, all you need to do is overwrite the position prop and you’re good to go:

There’s even more that you can do with the toasts but I won’t go into them here. If you’re interested, check out the react toastify demo page.