React-Toastify is a lightweight, customizable, and user-friendly notification library for React applications that allows developers to display alerts, success messages, warnings, and error messages quickly. In this article, we’ll learn how to create custom alerts in React using React-Toastify.

React-Toastify is an open-source library built for React applications with a simple, easy-to-use, and customizable syntax. React-Toastify is very useful when it comes to providing real-time feedback to users, such as login failures, password resets, email confirmations, etc. You can integrate React-Toastify seamlessly with your React application and customize the alerts to suit your requirements.

Step 1: Install React-Toastify

The first step in creating custom alerts using React-Toastify is installing the library. You can install the latest version of React-Toastify using NPM, a package manager for Node.js.

Run the following command in your terminal:

“`
npm install react-toastify
“`

Step 2: Import React-Toastify

Now that we have installed React-Toastify, the next step is to import the library in our React application. Add the following import statement at the top of your React component file:

“`
import { ToastContainer, toast } from ‘react-toastify’;
import ‘react-toastify/dist/ReactToastify.css’;
“`

Step 3: Create Custom Alerts

To create a custom alert, you can use the `toast` function available in React-Toastify. You can call this function with your preferred parameters to customize the alert message, the alert type, and its display duration.

“`
toast(‘This is a default alert message’, {
position: “top-right”,
autoClose: 5000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
});
“`

In the above code snippet, we have called the `toast` function with a default alert message and an options object. The options object consists of the following properties:

– `position`: The position on the screen where you want the alert message to appear. The default value is “top-right”.

– `autoClose`: The time duration in milliseconds after which the alert message will disappear automatically. The default value is 5000 (5 seconds).

– `hideProgressBar`: A Boolean value indicating whether or not to hide the progress bar. The default value is false.

– `closeOnClick`: A Boolean value indicating whether or not to close the alert message when clicked. The default value is true.

– `pauseOnHover`: A Boolean value indicating whether or not to pause the display of the alert message when the mouse pointer hovers over it. The default value is true.

– `draggable`: A Boolean value indicating whether or not the alert message can be dragged by the user. The default value is true.

– `progress`: A component that shows the progress of the alert message.

Step 4: Customize the Alert Types

React-Toastify provides various types of alerts such as success, error, warning, and info out of the box. However, you can customize these alert types according to your requirements.

“`
toast.success(‘This is a success message’, {
position: “top-center”,
autoClose: 3000,
});

toast.error(‘This is an error message’, {
position: “top-center”,
autoClose: false,
});

toast.warning(‘This is a warning message’, {
position: “top-center”,
autoClose: 5000,
});

toast.info(‘This is an info message’, {
position: “top-center”,
autoClose: 3000,
});
“`

In the above code snippet, we have customized each alert type by changing their available options like position and autoClose, etc.

Step 5: Display the Alerts

The final step is to display the alerts in your React application. To do this, you need to add the `ToastContainer` component to the root of your React component tree. The `ToastContainer` component is responsible for displaying the alerts.

“`
function App() {
return (

toast.success(‘Welcome to React Toastify’)}>
Click Me

);
}
“`

In the above example, we have added a button to the `App` component that will trigger a success alert when clicked.

Conclusion

React-Toastify is an excellent library for creating custom alerts in React. Its simple and easy-to-use syntax allows you to create custom alerts with various options and styles, and also customize them according to your requirements. Using React-Toastify will help you provide real-time feedback to your users and enhance their overall user experience.