Toastify

Toastify is a lightweight, customizable React library for showing toast notifications. It supports multiple themes, positions, notification types, and async operations with promise-based toasts.

Features

• Customizable Notifications: Choose from various themes (dark, light), positions, and types.
• Promise Support: Handle async operations with success and error notifications.
• Close Button Option: Allow users to dismiss toasts manually.
• Fully Typed: TypeScript support for better development experience.
• Lightweight: Minimal impact on your application's size and performance, ensuring that your app remains fast and responsive.

Installation

# with npm
npm install toastify
# or with yarn
yarn add toastify
# or with bun
bun add toastify

Usage

Setting Up the Toast Provider

First, import and render the ToastContainer at the root level of your application:

import React from 'react';
import { ToastContainer } from 'toastify-react';

const App = () => (
  <>
    <ToastContainer />
    {/* Rest of your app components */}
  </>
);

export default App;

This ensures that your toasts will be displayed in the correct position and with the proper styling.

Displaying a Toast Notification

Once you've set up the ToastContainer, you can trigger toast notifications using the addToast function. Here’s an example of displaying a success toast:

Copy code
import React from 'react';
import { addToast } from 'toastify-react';

const App = () => {
  const showToast = () => {
    addToast({
      message: 'This is a success toast!',
      type: 'success', // 'success', 'error', 'info', 'warning'
      position: 'top-right', // 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center'
      theme: 'dark', // 'dark', 'light'
      duration: 3000, // Display duration in milliseconds
    });
  };

  return <button onClick={showToast}>Show Toast</button>;
};

export default App;

Toast with Async Operations

You can use addToast.promise to handle async operations, and show a toast while the operation is in progress. Once the operation is complete, a success or error toast will be shown.

Here’s an example:

Copy code
import React from 'react';
import { addToast } from 'toastify-react';

const App = () => {
  const saveSettings = () =>
    new Promise<void>((resolve, reject) => {
      setTimeout(() => {
        Math.random() > 0.5 ? resolve() : reject();
      }, 3000);
    });

  const handleAsyncToast = () => {
    addToast.promise({
      asyncOperation: saveSettings,
      message: 'Saving settings...',
      successMessage: 'Settings saved successfully!',
      errorMessage: 'Failed to save settings.',
      position: 'top-center',
      theme: 'light',
      duration: 3000,
    });
  };

  return <button onClick={handleAsyncToast}>Save Settings</button>;
};

export default App;

API

addToast(options)

| Property | Type | Default | Description | |-------------------|--------------|-------------------|------------------------------------------------------------| | message | string | '' | The main message of the toast. | | type | ToastType | 'info' | Type of toast: success, error, info, or warning. | | position | ToastPosition | 'bottom-right' | Position on screen: top-left, top-right, bottom-left, bottom-right, or top-center. | | theme | ToastTheme | 'dark' | Theme of the toast: dark or light. | | duration | number | 3000 | How long the toast should stay visible (in milliseconds). | | showCloseButton | boolean | false | Whether to show a close button for dismissing the toast. |

addToast.promise(options)

| Property | Type | Description | |-------------------|---------------------|------------------------------------------------------------| | asyncOperation | () => Promise<any>| The async operation to be tracked. | | message | string | The message shown during the async operation. | | successMessage | string | The message shown if the operation succeeds. | | errorMessage | string | The message shown if the operation fails. | | Other Properties | Same as addToast | Inherits all other options from addToast. |