Hey Folks, today we will discuss React Toastify. We will share the full guide about React toastify and its features as well. So, please keep with us at the end. You will get all the full knowledge about the react-toastify.
In today’s world new modern web applications, User notification is one of the most important role plays. This user notification helps to engage the user experience. When we are trying to submit the form, We can throw the success message, Error Message or any informational alert.
So, for that reason React Introduces a React Toastify. It simplifies the process of creating the responsive toast or alert message/notifications for your web application. In this article we will explore or find out how we can integrate the react-toastify npm into our react based web application project.
With this we will understand its features and the real world examples. Now your mind has hit that question: Why do we Use it? So, let’s explore the world of it.
Why do we use React-Toastify?
React-Toastify npm basically stands for their flexibility, real user experience and its simplicity. It is usable due to many of the reasons. The following reasons are mentioned below.
- It is easy to use and integrate with your web application.
- It supports many kinds of customization designs.
- It is built in support for the various kinds of notifications of alert messages like Success Message, Error Messages, Warning Messages and Informative messages as well.
- It automatically handles the duration of dismissing the notification of the set of intervals of time.
- It supports Multi-Languages apps.
- The code of React-toastify npm is very easy. So, in a few lines of code it will easily integrate with your react web application.
So, these are the important reasons why we have to use React-Toastify npm.
Getting Started with React-Toastify
Let’s follow the below steps, so that we can learn how to use this toastify react.
Step 1 : Install React-Toastify
If you want to use React-Toastify, then at first you need to install it via the yarn of npm.
By Using npm
npm install react-toastifyBy Using yarn
<code>yarn add react-toastify</code>So, after these commands your react-taostify has been installed in your react or next.js project.
Can’t resolve ‘react-toastify’
If you throw this error in your web application that means the dependency is not successfully installed in your react or next js application. Please follow the below command to resolve this “can’t resolve ‘react-toastify’ ” problem.
NPM Command →
<b>npm install react-toastify</b>Step 2 : Import and Configure
Now in your react application, it is important to configure and set up in your application. Please add the ToastContainer to your root component. Root component typically App.js
import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
const App = () => {
return (
<div>
<h1>Welcome to React-Toastify</h1>
<ToastContainer />
</div>
);
};
export default App;
Step 3 : Display Notifications
Now you have to use the functions to trigger the toast notifications in your app. Now we have shared an example below to show the success notification.
const notify = () => {
toast.success('Ractify Form submitted successfully!', {
position: toast.POSITION.TOP_RIGHT,
autoClose: 3000,
});
};If you want to call the “notify” function on any event like button onClick etc.
<button onClick={notify}>Show Notification</button>React Toastify Features
It supports many different types of notifications. We shared with you 4 most commonly used notification types. So, let’s get started.
Notification 1 : “Success” → toast.success()
The Success notifications are commonly used when you have to show the success message in your app. For example when you submit a form and the data will successfully be saved in your database. After that you receive the success as a response on that time you can use this success toast.
toast.success('This is a ractify success message!');Notification 2 : “Error: → toast.error()
The Error notifications are commonly used when you have to show the error message in your app. For example when you submit a form and you get an error. After that you receive the error as a response on that time you can use this error toast.
toast.error('This is a ractify error message!'); Notification 3 : “Warning: → toast.warn()
The warning notifications are commonly used when you have to show the warning message in your app. For example when you submit a form and you get a warning . After that you receive the warning as a response on that time you can use this warning toast.
toast.warn ('This is a ractify warning message!');Notification 4 : “Information: → toast.info()
The Information notifications are commonly used when you have to show the Information message in your app. For example when you submit a form and you get an extraInformation as a response like a token or something else. After that you receive the Information as a response on that time you can use this info toast.
toast.info('This is a ractify informational message!');
Add Custom Styling in your toastify react
You can customize the toast notification by adding the additional options. You can provide the additional classes as well.
toast('Custom styled toast', {
className: 'custom-toast',
bodyClassName: 'custom-body',
progressClassName: 'custom-progress',
});Types of Positioning in React-toastify npm
There are four types of the positions to showcase your react-toastify. Please follow the below types of positioning.
toast.POSITION.TOP_LEFT : It is used to show your toast at the top left position.
toast.POSITION.TOP_RIGHT : It is used to show your toast at the top right position.
toast.POSITION.BOTTOM_LEFT : It is used to show your toast at the bottom left position.
toast.POSITION.BOTTOM_RIGHT : It is used to show your toast at the bottom right position.Additional Bonus Points by Ractify
Now it’s time to reveal additional features of the react tostify. Let’s follow the below best bonus by ractify.
React tostify Promise based toast
It supports the async await promise based architecture or we can say that workflows. I can show the different types of the notification based on the various promises like resolve or reject promise.
const fetchData = async () => {
const toastId = toast.loading('Fetching data...');
try {
const data = await fetch('/api/data');
toast.update(toastId, { render: 'Data fetched successfully!', type: 'success', isLoading: false });
} catch {
toast.update(toastId, { render: 'Error fetching data', type: 'error', isLoading: false });
}
};You can follow this code if you want to showcase your react tostify based on the async promises.
React Tostify AutoClose & Manual Close Feature
As you already know that the default behaviour of the react tostify is auto dismissed after the 5 seconds. But if you want then you can adjust this by your choice or by disabling it.
toast.success('This is a ractify success message!', { autoClose: 10000});
toast('Close Toast', { autoClose: false });Now you can see that we increase the time from 5 sec to 10 sec. Also you can disable the autoClose by the above code of line. Lets see the best practice for using the react-toastify.
Best Way to Use React Tostify
If you are using the toast then make sure you can show the toast on the limit. Because if you are using it every time in every place then it is counterProductive your app. So, use it where you want to showcase.
When it is necessary to use then you can absolutely use this otherwise no recommandation. Align the toast styling with your application themes.
Conclusions
So, in this article we cover the many kinds of stuff like how we use the react-toastify, features, custom styling, positioning, bonus points, promise base workflow and best practice of using it. So, as we know that react toastify is one of the most powerful tools or npm packages that simplifies the notification structure in your application.
It is easy to use, easy to customize and supports the various use cases to make it the go-to library for the developers. It helps the developer if you are creating a small or large scale project. So, it enhances the user experience as well.
So, I hope you like this article. If you like this article then please make sure you can suggest or share this with your family, and developer friends. So, they can know the additional stuff about it. You can also follow us on social media as well.
