react-toastify

React-Toastify is a popular, lightweight, and highly customizable React library designed to add beautiful, non-blocking toast notifications to your web applications. These notifications are small pop-up messages that appear briefly to provide feedback to users without interrupting their workflow. Common use cases include confirming actions (e.g., 'Item added to cart'), displaying errors ('Login failed'), or providing informational messages ('Data saved successfully').

Key features of React-Toastify include:
* Easy Integration: Simple setup with a `ToastContainer` component and a `toast` utility function.
* Multiple Types: Supports various toast types like `success`, `error`, `info`, `warning`, and `default`, each with distinct styling.
* Customizable Position: You can choose where toasts appear on the screen (e.g., top-right, bottom-left, top-center).
* Auto-Close Duration: Configure how long a toast stays visible before automatically disappearing.
* Pause on Hover: Toasts can pause their auto-close timer when the user hovers over them.
* Themes: Built-in support for light and dark themes.
* Custom Icons & Styling: Override default icons and apply custom CSS for a branded look.
* Programmatic Control: Offers a comprehensive API to update, dismiss, or clear toasts.
* Promise API: Easily manage loading, success, and error states for asynchronous operations.
* Accessibility: Designed with accessibility in mind.

To use React-Toastify, you typically:
1. Install the package via npm or yarn.
2. Import the `ToastContainer` component and the `toast` utility from `react-toastify`. You also need to import its CSS.
3. Render the `ToastContainer` component once in your application's root (e.g., `App.js`). This container acts as the host for all your toasts.
4. Call `toast.success()`, `toast.error()`, `toast.info()`, `toast.warn()`, or `toast()` anywhere in your components to display a notification. You can pass a second argument as an options object to customize individual toasts.

Example Code

// First, install react-toastify:
// npm install react-toastify
// or
// yarn add react-toastify

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

function App() {
  const notifySuccess = () => {
    toast.success('Operation successful!', {
      position: 'top-right',
      autoClose: 3000,
      hideProgressBar: false,
      closeOnClick: true,
      pauseOnHover: true,
      draggable: true,
      progress: undefined,
      theme: 'light',
    });
  };

  const notifyError = () => {
    toast.error('Something went wrong!', {
      position: 'bottom-left',
      autoClose: 5000,
      hideProgressBar: true,
      closeOnClick: true,
      pauseOnHover: true,
      draggable: true,
      progress: undefined,
      theme: 'dark',
    });
  };

  const notifyInfo = () => {
    toast.info('Here is some information.', {
      position: 'top-center',
      autoClose: 2000,
      closeButton: false, // No close button
    });
  };

  const notifyWarning = () => {
    toast.warn('Please review the changes.', {
      position: 'bottom-right',
      autoClose: false, // Will not auto-close
      closeOnClick: false, // Clicking toast won't close it
    });
  };

  const notifyPromise = () => {
    const myPromise = new Promise((resolve, reject) => {
      setTimeout(() => {
        const success = Math.random() > 0.5;
        if (success) {
          resolve('Promise resolved successfully!');
        } else {
          reject('Promise rejected!');
        }
      }, 2000);
    });

    toast.promise(
      myPromise,
      {
        pending: 'Promise is pending...',
        success: 'Promise 🎉 resolved!',
        error: 'Promise 🤯 rejected!',
      },
      {
        position: 'top-right',
        autoClose: 3000,
        theme: 'colored',
      }
    );
  };

  return (
    <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
      <h1>React Toastify Example</h1>
      <p>Click the buttons below to see different types of toast notifications.</p>
      <div style={{ display: 'flex', gap: '10px', marginTop: '20px' }}>
        <button
          onClick={notifySuccess}
          style={{ padding: '10px 15px', backgroundColor: '#28a745', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}
        >
          Show Success Toast
        </button>
        <button
          onClick={notifyError}
          style={{ padding: '10px 15px', backgroundColor: '#dc3545', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}
        >
          Show Error Toast
        </button>
        <button
          onClick={notifyInfo}
          style={{ padding: '10px 15px', backgroundColor: '#17a2b8', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}
        >
          Show Info Toast
        </button>
        <button
          onClick={notifyWarning}
          style={{ padding: '10px 15px', backgroundColor: '#ffc107', color: 'black', border: 'none', borderRadius: '5px', cursor: 'pointer' }}
        >
          Show Warning Toast
        </button>
        <button
          onClick={notifyPromise}
          style={{ padding: '10px 15px', backgroundColor: '#6f42c1', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}
        >
          Show Promise Toast
        </button>
      </div>

      {/* The ToastContainer must be rendered once in your app, ideally at the root level */}
      <ToastContainer />
    </div>
  );
}

export default App;

Example Code

Related Topics