Step-1: Create a New React Project

If the project doesn’t exist yet, follow these steps to create a new React app:

npx create-react-app notification-system 
cd notification-system 
npm start 

Step-2: Install React Toastify

Install the React Toastify library in your project:

npm install react-toastify

Step-3: Import React Toastify into Your Component

To start using React Toastify, import the necessary components into the file where you want to display notifications.

• • Import ToastContainer to handle the container for toasts.

• • Import the toast method to create notifications.

• • Import the CSS file for basic styles.

import { ToastContainer, toast } from 'react-toastify'; 
import 'react-toastify/dist/ReactToastify.css';

Step-4: Basic Usage (Displaying a Notification)

To display a simple notification, call the toast() function with the message as a parameter.

Example:

Step-5: Different Types of Notifications

React Toastify supports various types of notifications such as success, error, info, and warning. You can use the following methods:

• • toast.success("Success message")

• • toast.error("Error message")

• • toast.info("Info message")

• • toast.warn("Warning message")

Step-6: Customizing Toast Notifications

Toast notifications can be customized using options like:

Example:

Step-7: Toast Positioning

Toast notifications can be displayed at different positions on the screen. Use one of the following options for positioning:

• • toast.POSITION.TOP_LEFT

• • toast.POSITION.TOP_RIGHT

• • toast.POSITION.TOP_CENTER

• • toast.POSITION.BOTTOM_LEFT

• • toast.POSITION.BOTTOM_RIGHT

• • toast.POSITION.BOTTOM_CENTER

Example:

Step-8: Control Auto-Close Duration

To control how long the toast stays on the screen, use the autoClose property:

Example:

Step-9: Custom Styling for Toasts

You can customize the style of your toast notifications by passing custom CSS class names or inline styles.

Example:

Step-10: Limiting Number of Toasts

To limit the number of toast notifications visible at once, use the limit property in the limit property in the ToastContainer.

ToastContainer limit={3}

This ensures that no more than 3 toasts will appear on the screen at the same time.

Step-11: Dismissing Toasts Programmatically

To dismiss a toast manually or programmatically, use the toast.dismiss() method:

Dismiss all toasts:

toast.dismiss();

Dismiss a specific toast by ID:

const toastId = toast("This toast can be dismissed!"); 
toast.dismiss(toastId);

Step-12: Toast with Progress Bar

You can display a progress bar inside the toast to indicate the duration before autoclose.

Example:

toast.success("Message with progress bar", { 
autoClose: 5000, 
progress: undefined });

Step-13: Hiding the Close Button

If you don’t want the close button to appear in your toast notifications, you can hide it by setting the closeButton property to false

Example:

toast("Notification without close button", {
   closeButton: false
});

Step-14: Creating a Toast Notification System

To create a complete notification system with various types of messages and custom options, combine the features described above.

Example:

Conclusion

In summary, React Toastify makes adding notifications to your React apps simple and customizable. With features like toast positioning, auto-close, and custom styling, it’s an essential tool for delivering user-friendly alerts. Try it out and keep your users engaged with seamless notifications!