Mastering React-Toastify: A Comprehensive Guide

When users interact with a UI, various operations occur behind the scenes, and providing feedback is essential for a seamless user experience. This is where toast notifications come in – unobtrusive, popup messages that inform users about the status of an operation.

What is React-Toastify?

React-Toastify is a popular, MIT-licensed package that allows you to add toast notifications to your React application. It’s highly customizable, easy to use, and offers various toast variants.

Getting Started with React-Toastify

To start using React-Toastify, install it via npm or yarn, then import the ToastContainer component and the toast object in your React project.

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

Styling Your Toast Messages

React-Toastify provides several ways to style your toast messages. You can use the toast.success(), toast.error(), toast.warning(), and toast.info() functions to display different types of toast messages.

toast.success('Operation successful!');
toast.error('Error occurred!');

Customizing Your Toast Messages

You can customize your toast messages by adding a className to the toast notification. This allows you to apply custom styles to your toast messages.

toast.success('Operation successful!', {
  className: 'custom-toast',
});

Positioning Your Toast Messages

React-Toastify allows you to position your toast messages at the top right, top center, top left, bottom right, bottom center, or bottom left of the page.

toast.success('Operation successful!', {
  position: 'top-right',
});

Using the useNotificationCenter Hook

The useNotificationCenter Hook is a React-Toastify addon that allows you to build a notification center on top of React-Toastify. It returns several methods and properties that you can use to manage your notifications.

import { useNotificationCenter } from 'eact-toastify/addons';

const { notifications, clear, markAllAsRead, markAsRead } = useNotificationCenter();

Putting it all Together

By combining the features of React-Toastify, you can create a powerful notification system that enhances the user experience of your React application.

import React from 'eact';
import { ToastContainer, toast } from 'eact-toastify';
import 'eact-toastify/dist/ReactToastify.css';
import { useNotificationCenter } from 'eact-toastify/addons';

function App() {
  const { notifications, clear, markAllAsRead, markAsRead } = useNotificationCenter();

  const handleButtonClick = () => {
    toast.success('Operation successful!');
  };

  return (
    <div>
      <ToastContainer />
      <button onClick={handleButtonClick}>Click me</button>
      <ul>
        {notifications.map((notification) => (
          <li>
            <em>{notification.title}</em>
            <p>{notification.text}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

By mastering React-Toastify, you can take your React application to the next level and provide a better user experience for your users.