How to Create Custom Notification Component in React Using SweetAlert
SweetAlert is a popular library that gives you the ability to create customized notification components for your React application. You can use notifications to alert users about important information, errors, or successful actions within your application. This adds up to a great user experience.
Installing the SweetAlert Library
To use theSweetAlertlibrary to create notifications, you need to install it using any package manager of your choice.
You can install it via theNPM package managerby running the following command in your terminal:
Using SweetAlert to Create Notifications
Creating custom notifications in your React app using the SweetAlert library is similar tousing the Toastify library. Theswalfunction provided by the SweetAlert library creates an instance of the notification component and defines the notification’s properties.
Here’s an example of using theswal()function to create a notification component:
Clicking the button will call theswalfunction, which will display a notification with the “Hello There” message.
Theswalfunction takes three parameters. The first parameter is the title of the notification, the second parameter is the message, and the third is the icon to display in your notification.
You can set theiconparameter to one of the predefined values i.e.,success,warning,error, orinfo. The notificationicon will then be based on the values you passed.
For example:
When the user clicks the button, it calls thenotifyfunction. This function will then display a notification with the message “Hello There” and “Welcome to my Page” with a success icon.
An alternative to using theswalfunction with the three parameters would be to use theswalfunction with the object parameter. This object parameter contains properties that define the notification component.
In the code block above, theswalfunction takes an object with the following properties:title,text,icon, andbutton.
Thetitleproperty specifies the title of the notification, while thetextproperty defines the message. With theiconproperty, it’s possible to specify the type of icon displayed in the notification.
Lastly, thebuttonproperty specifies the text of the button displayed in the notification. In this case, the button displays the textOK.
Customizing the Button Property
You can customize thebuttonproperty of your notification component to fit your design needs. Thebuttonproperty takes an object with properties used to configure the behavior and appearance of the button.
A default button contains the following properties:
In the code block above, the following properties are used with the button:
You can also render more than one button using an array with thebuttonsproperty. The array will take strings as its elements.
In this example, your notification component will contain two buttons with the texts’cancelandOk. Setting thebuttonsproperty tofalsewill render a notification with no button.
Rendering HTML Elements Inside the Notification Component
You can also render HTML elements apart from plain strings as a notification. This provides a wide range of customization options.
In this example, you use thecontentproperty to render an input field with placeholder text.
You specify the content of the notification using thecontentproperty and the HTML element to render with theelementproperty. To specify the attributes of the HTML element, you use theattributesproperty.
The code block above will render the below notification when you click the button element.
Styling the Notification Component
Rather than adhering to the default notification box style provided by the SweetAlert library, you’re able to customize the appearance of the notification box byapplying your own CSS styles.
You will use theclassNameproperty to add your styles to the notification. TheclassNameproperty defines a CSS class for the notification.
The notification in the code block above has aclassNamevaluealert. After creating the notification and defining theclassName, you will define your CSS styles:
The CSS styles above will apply to the notification on render:
Closing the Notification Component
The SweetAlert library provides several options to customize the way your notifications are closed. These options are thecloseOnEsc,closeOnClickOutside, andtimerproperties.
ThecloseOnEscproperty determines whether the notification box closes when the user presses the Esc key on their keyboard. ThecloseOnEscproperty takes a boolean value.
By default, thecloseOnEscproperty is set totrue. In the code block above, you’re setting thecloseOnEscproperty tofalse. By setting the property tofalse, the user cannot close the notification box by pressing the Esc key.
you may also determine whether the user can close the notification box by clicking outside of the box using thecloseOnClickOutsideproperty.
If the property is set totrue, thecloseOnClickOutsideproperty enables the closing of the notification box by clicking anywhere outside of it. This is the default behavior of SweetAlert. To stop this behavior, set thecloseOnClickOutsideproperty tofalse.
With thetimerproperty, you can set a time limit for the notification box to automatically close itself. Thetimerproperty takes an integer value in milliseconds.
In this example, thetimerproperty is set to5000. The notification will only be visible for 5 seconds.
Efficient Custom Notifications Using SweetAlert
SweetAlert is a powerful library using which you can create customized notifications in a React application. Using the library’sswalfunction, you can now build notifications with custom properties and behavior. You can also make use of other libraries like React-Toastify to create custom alerts in a React application.
Learn how to use this library to create attractive, usable pop-up messages.
Sometimes the smallest cleaning habit makes the biggest mess.
Freeing up vital memory on Windows only takes a moment, and your computer will feel much faster once you’re done.
My foolproof plan is to use Windows 10 until 2030, with the latest security updates.
You don’t need to fork out for expensive hardware to run an AI on your PC.
The best features aren’t the ones being advertised.
