Toast Notification for React Apps
Context
Notifications help your users know what’s happening in the application. Especially these days with a lot of asynchronous operations, you would need that mechanism to notify them when a certain action succeeds or fails.
In this post, I’ll cover how to enable toast notification in your React SPA, and use it within components or in the middleware outside a visual component structure.
End Result
Here is how the end result looks like. I can send users a notification on demand synchronously, or when an asynchronous operation is complete.
Libraries
I am using React Toastify for the purpose of this post, but there are plenty of toast libraries out there which you could use.
Implementation
1. Synchronous (OnDemand)
When I just want to show the user a notification which doesn’t depend on completion of another task, all I need to do is to call the toast method with the message.
The ToastContainer as you have noticed is the placeholder for toast notifications. The spot that the notification appears from, is not determined by the ToastContainer position in the mark up. If I wanted to set that location and other settings, I could set the properties of the Container as you see in the above code.
Although that would set those properties for all the notifications I dispatch in this component, I am still able to override those settings for each notification like the below snippet:
I am only overriding those settings in one file to set the stage for the next stage, which I have the ToastContainer at the root of my application (which enables Toasts for the whole application). My intention was to show you that you can have those settings applied to the majority of screens and override them in some individual ones.
Here is where I’d put my ToastContainer, at the root of my app:
https://gist.github.com/MahdiKarimipour/efef9dcf0d138a0904e7013d10b7f775
Note
Configuration, plumbing and troubleshooting your software foundation take a considerable amount of time in your product development. Consider using Pellerex which is a complete foundation for your enterprise software products, providing source-included Identity and Payment functions across UI (React), API (.NET), Pipeline (Azure DevOps) and Infrastructure (Kubernetes).
2. Asynchronous Operations
Dispatching notifications to my user is not always happening from within the component, and I might need to dispatch these notifications when an asynchronous operation completes outside the component.
A good example would be when I use Redux, and I’d need to notify my user of an error from within one of the middleware objects like below:
If you read my post on API Calls in SPA, the above payload structure would sound familiar, and make more sense. In my next post around Complete Redux Setup with React I will be using this notification middleware, and everything will fit together then. So have a look at those posts as well to get the full picture.
Pellerex Foundation: For Your Next Enterprise Software
How are you building your current software today? Build everything from scratch or use a foundation to save on development time, budget and resources? For an enterprise software MVP, which might take 8–12 months with a small team, you might indeed spend 6 months on your foundation. Things like Identity, Payment, Infrastructure, DevOps, etc. they all take time, while contributing not much to your actual product. These features are needed, but they are not your differentiators.
Pellerex does just that. It provides a foundation that save you a lot development time and effort at a fraction of the cost. It gives you source-included Identity, Payment, Infrastructure, and DevOps to build Web, Api and Mobile apps all-integrated and ready-to-go on day 1.
Check out Pellerex and talk to our team today to start building your next enterprise software fast.
