React Toastify is a popular notification library that allows developers to easily create and customize toast notifications in their React applications. Toast notifications are a great way to give users feedback on their actions, such as successful form submissions or error messages.
In this article, we’ll explore the features of React Toastify and demonstrate how to use it in your React application with code examples.
Installation
To use React Toastify, you need to install it via npm. Open the command prompt and type the following command:
npm install react-toastify --save
After installing the dependency, you can import React Toastify in your application and start using it.
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
Here, the ToastContainer component is a wrapper component that will render all your toasts. toast is a function that you can use to control when and how your toasts appear. We’ll explore this function in more detail later in the article.
Setting Up Toast Configuration
React Toastify provides developers with the power to configure the toast messages according to requirements. To configure the toast, developers can use the following props of ToastContainer:
autoClose– Determines how long the toast message will be visible in milliseconds. If the value is set to 0 or false, the toast message will remain until it is manually closed, while the default value is 5000 ms.position– This prop determines the position of the toast message on the screen. It takes various values liketop-right,top-center,top-left,bottom-right,bottom-center, andbottom-left, according to the preference of the developer.hideProgressBar– When set to false, a progress bar appears to indicate how much time is left before the toast automatically closes. The default value is true.newestOnTop– This prop determines if the toast messages will appear in reverse chronological order. If set to false, then the oldest message appears on top.closeOnClick– This prop determines if the toast message will close on clicking. The default value is true.rtl– It sets the direction of the messages and progress bar from right to left.transition– Determines how the toast messages appear and disappear. By default, a scale transition is used.
For the following code snippet, I am using the default position, autoClose, and other parameters are configured according to the requirement.
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
function MyComponent() {
return (
<div>
<h1>MyComponent</h1>
<button onClick={() => toast('Hello')}>Show Toast</button>
<ToastContainer
position="top-center"
autoClose={2000}
hideProgressBar={true}
newestOnTop={false}
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
/>
</div>
);
}
Creating Custom Toast
React Toastify provides the functionality to create the custom toast notification. For creating the custom message, we can use the toast function provided by react-toastify.
In the following example, I will show how to create a custom toast message using an icon as a notification.
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import React from "react"
import {BsFillQuestionCircleFill} from "react-icons/bs"
function CustomToast({msg}) {
return(
<div className="newNotificationToast">
<div><BsFillQuestionCircleFill/></div>
<div>{msg}</div>
</div>
)
}
function MyComponent() {
const notify = () => toast(<CustomToast msg="Custom toast message"/>,{
hideProgressBar: true,
} );
return (
<div>
<h1>MyComponent</h1>
<button onClick={notify}>Show Toast</button>
<ToastContainer
position="top-center"
autoClose={2000}
/>
</div>
);
}
In the preceding code, I created a function CustomToast which is used to create a custom toast. We can use toast to display the custom toast from the notify function. We can customize the behavior of the toast notification by passing properties in an object as shown.
hideProgressBar prop is used to hide the progress bar while the toast notification is visible.
Conclusion
React Toastify is a simple and effective library to manage toast notifications in React. It requires minimal configuration, and developers can even create custom toast notifications with ease. In this article, we explored the features and usage of React Toastify, including configuring toast parameters and creating custom toast notifications using the toast method. Hopefully, this article will prove helpful for React developers who want to implement toast notifications in their applications.
let's dive deeper into the topics we have covered in the previous sections.
Installation
NPM is a popular package manager in the JavaScript eco-system that we use to install React Toastify. You can install the React Toastify package by running the following command:
npm install react-toastify --save
This command installs the React Toastify package and saves it to the dependencies list in your package.json file.
Additionally, you will have to import the ToastContainer component and the toast function from the react-toastify package. Once you have done that, you can start using the toast notifications in your application.
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
Using ToastContainer
The ToastContainer component is responsible for rendering the toast notifications. You can place the ToastContainer anywhere in your application, but it's a good practice to place it in the root component of your application.
When you use the ToastContainer, you provide it with certain props to configure the toast notifications. Below are some of the most common props of the ToastContainer.
- position: This prop determines the position of the ToastContainer on the screen. The possible values are top-left, top-center, top-right, bottom-left, bottom-center, and bottom-right.
- autoClose: This prop determines the time interval (in milliseconds) for which the toast notification should remain visible. If you set it to zero, the toast notification will stay until the user closes it manually.
- newestOnTop: This prop determines whether the newly generated toast notifications should be displayed on top or at the bottom.
- closeOnClick: This prop determines whether the toast notification should close on a click by the user.
Creating Toast Notifications
After configuring the ToastContainer, you can start creating toast notifications in your application. The toast function provided by the react-toastify library can be used to generate toast notifications anywhere in your application.
Here's an example code snippet to showcase how to use the toast function to create a simple toast notification with default configuration.
function Example() {
const notify = () => toast("Hello World");
return (
<div>
<button onClick={notify}>Show Toast</button>
<ToastContainer />
</div>
);
}
In this code snippet, we are creating a function named "notify" that uses the toast function to create a simple toast notification with the message "Hello World". We call the notify function when a button is clicked.
Customizing Toast Notifications
React Toastify comes with a bunch of in-built configuration options that are sufficient for most developers. However, there are scenarios where you may need to customize a toast notification beyond the built-in functionality. For such cases, you can use the toast function to create custom toast notifications.
Here's an example code snippet to showcase how to use the toast function to create a custom toast notification.
function CustomToast() {
return <div>Custom Toast</div>;
}
function Example() {
const notify = () =>
toast(<CustomToast />, {
position: toast.POSITION.BOTTOM_LEFT,
autoClose: 5000,
hideProgressBar: true,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
});
return (
<div>
<button onClick={notify}>Show Toast</button>
<ToastContainer />
</div>
);
}
In this code snippet, we are creating a custom toast notification using the toast function. We define a functional component named "CustomToast" that returns the content to be displayed in the toast notification. We pass this component as the first argument to the toast function.
We also pass an object as the second argument to the toast function, which includes configuration options for the toast notification.
Conclusion
React Toastify is a popular notification library for React developers that provides an easy-to-use interface for creating toast notifications. You can customize different properties of the toasts, such as position, duration, and behavior. You can also create custom toast messages as per your needs. With the help of this library, developers can enhance the user experience of their application by providing meaningful and timely feedback to users.
Popular questions
Q1. What is React Toastify?
A1. React Toastify is a popular notification library for React that allows developers to easily create and customize toast notifications in their applications.
Q2. How do you install React Toastify?
A2. You can install React Toastify via npm by running the following command:
npm install react-toastify --save
Q3. What is the ToastContainer component responsible for in React Toastify?
A3. The ToastContainer component is responsible for rendering the toast notifications.
Q4. How can you configure toast notifications with React Toastify?
A4. You can configure toast notifications by providing certain properties to the ToastContainer component, such as position, autoClose, newestOnTop, and closeOnClick.
Q5. How can you create custom toast notifications with React Toastify?
A5. You can create custom toast notifications by using the toast function provided by React Toastify and passing a custom component (such as a functional component that returns the content to be displayed in the toast) and additional configuration options (such as the duration, position, and behavior of the toast) to the function.
Tag
Notify
