Showing Toast Alerts in React With “react-toastify” | by Petros Demetrakopoulos | May, 2022

Construct responsive net apps

Photograph by Eiliv-Sonas Aceron on Unsplash

We regularly want to tell the consumer about an motion that succeeded or failed in any net app. This operate is commonly achieved by exhibiting the consumer alerts or notifications on the high of the display screen, after which these disappear seconds later. These alerts are known as “Toasts” and are self-dismissed after a timeout set by builders.

The Android/Materials design framework launched this idea, nevertheless it has developed and turn out to be an ordinary in net and cellular over the last years.

So right here, I’ll current a simple option to implement them in React tasks utilizing the react-toastify library.

As I’m an enormous fan of TypeScript (the rationale behind this alternative is out of the scope of this text), I’ll generate a React venture utilizing the TypeScript template. Nonetheless, the identical ideas and patterns can be utilized as-is in any React venture utilizing JavaScript or TypeScript. So, the primary command I executed on the terminal was the next:

npx create-react-app react-toasts --template typescript

Then we set up react-toastify, the library that we are going to use to implement the toasts.

yarn add react-toastify

Now that the venture is initialized and the dependencies put in, we import the wanted components from the react-toastify library on the high of the App.tsx file. Then we add a button, and we set the onClick property to a operate (notifyDefault) that shows the toast.

The App.tsx file of your venture ought to now appear like this:

App.tsx file

Be aware that it will present the default toast, as we don’t type the toast with any parameters.

react-toastify permits us to format many issues. An important ones embody the place the place the alerts might be displayed, the timeout after the alerts might be dismissed, the theme’s look (mild, darkish, coloured), and so on.

This may be performed by setting the values of the respective props within the ToastContainer component or passing these parameters because the second arguments of the toast operate. Within the first case, all alerts will inherit the properties of the ToastContainer, whereas within the second case, every alert could be custom-made independently. You possibly can be taught extra about formatting choices within the documentation of react-toastify library.

Within the instance beneath, we are going to look at one other option to set completely different toast parameters for every alert.

As you may see, we added three extra buttons that set off three new features, respectively. We name the toast operate on every of those three features (traces 8–10). We go an object that holds the formatting parameters just like the dismiss timeout (autoclose), place, progress bar visibility, and so on.

You possibly can attempt it by cloning the final project on GitHub.

I hope you discover it fascinating, and it will likely be helpful in your future tasks! You’ll find the total venture on this GitHub repository.

More Posts