Implement Sweet Alerts with React JS

Hi guys! What's going on? This is the time to write another article on React JS. Actually this is not only a React article, but also an article on Sweet Alert. What is this sweet alerts? It's a simple library for including dynamic alerts with animations into our UI. We can easily integrate this into any language, according to their guides. So, today I'm going to explain you the way to implement sweet alerts with React JS.

Usually React JS installs packages from a package manager, to be used in the application. So, most used package manager is NPM as you know. Here I will also use this to install the package.

Create a React app with create-react-app command. If you don't know, visit the below link.

Link: https://salitha94.blogspot.com/2018/10/react-js-basic-concepts.html

Install Sweet Alert package into it by navigating into the project via terminal/cmd.

npm install sweetalert --save

Then you can import Sweet Alerts as swal, to any React component. This is the way to import.

import swal from 'sweetalert';

When to use these alerts?

In your application, you perform some actions. after an action is successfully performed as expected, you can display an alert to the user to inform it's done. For an example, just think you are going to add a record to database. After successfully adding it to DB, you can show an alert saying that addition was successful..

How to implement?

I'm not going to connect this with a real back-end. You can do it by following the steps I show. Just select a scenario that you are going to save a user to database. In React, I use Axios as the HTTP client to handle data with react. I think it's the most used client and the most easier one to implement.

If you want more details, visit my previous article on axios.
Link: https://salitha94.blogspot.com/2018/11/axios-http-client-with-react-js.html

Since axios is a promised based client, after the promise is fulfilled, we can perform displaying sweet alerts..Think of the scenario I told before(data adding scene). How to introduce sweet alerts into this function? Look at below code..

Here, after response has come, alert code has been included. These sweet alerts have several type of messages..They are success, info, error and warning. I have implemented a success message..You can see a green color tick indicating success. Other text shown can be customized.

Success message:

Error message:

Warning message:

Info message:

How to customize Message Body?

As I mentioned, we can change the message content to a some extent. Now I will explain the parameters included in swal.

title       :  Large text shown on the top
text       :  Small text shown below the top line
icon      :  Message icon type (success/error/warning/info)
timer     : Auto close ability after 2 seconds..change its value as you want
button   :  Button's availability on bottom down corner. (ok button)
This can be set as a string also, instead of true/false. Then that text will be shown on the button.
buttons  :  Show multiple buttons on message body. Ex: buttons: [ "ok", "cancel" ]
dangerMode  : This is for confirmation messages. When you want to ask are you sure? when this is set as true, color will be red.

Confirmation messages with an action

When you want to display a warning message before user does something very risky, you can sweet alerts in such situations also. An action can be implemented with axios to be completed after confirming by saying "ok".

When we click on ok, axios will take care of the deletion of any user. I will now show you the way to include this scenario.

Can you see the difference? In this way, we can easily introduce confirming action for a user in our applications. If you want more details, visit here, their official site. I have explained the practical usage of these sweet alerts.

Try to implement this into your UI code! It will be very attractive and informative for user. He or she is well aware of the actions they perform. I think you have got some idea to implement the sweet alerts with React JS and Axios. So, this is all for today. I will come again with another React article!

Good Bye!