react-nice-toast

A lightweight, customizable toast notification system for React. Supports multiple toast types, promise-based toasts, positions, and transitions.

Installation

npm install react-nice-toast

or

yarn add react-nice-toast

Also, import the default styles :

import "react-nice-toast/styles.css";

How to use

Import the Toast components:
import { ToastContainer, toast, Position } from   "react-nice-toast";

Basic Example

Here’s an example of how to integrate react-nice-toast into your React application:

function App() {

return (
<div>
  <ToastContainer
    position={Position.TOP_RIGHT}
    maxToasts={5}
    closeOnClick={true}
    pauseOnHover={true}
    theme="dark"
    transition="bounce"
    showProgressBar={false}
    showIcon={false}
  />

  <button onClick={() => toast.success("Operation completed successfully!")}>
    Show Success
  </button>

  <button onClick={() => toast.error("Something went wrong!")}>
    Show Error
  </button>
</div>
);
}

Toast Types

You can use different types of toasts :

• toast.success(message, options?) - Displays a success notification (e.g., when an operation completes successfully).
• toast.error(message, options?) — Displays an error notification (e.g., when something goes wrong).
• toast.warning(message, options?) — Displays a warning notification (e.g., when a non-critical issue occurs).
• toast.info(message, options?) — Displays an informational notification (e.g., for general messages or updates).
• toast.loading(message, options?) — Displays a loading notification (e.g., for ongoing processes like data fetching).
• toast.update(message, options?) — Updates an existing toast notification with a new message or options.
• toast.delete(message, options?) — Displays a deletion notification (e.g., when an item is successfully removed).
• toast.upload(message, options?) — Displays a notification related to file uploads (e.g., when a file is being uploaded).
• toast.download(message, options?) — Displays a notification related to file downloads (e.g., when a file starts downloading).
• toast.network(message, options?) — Displays a network-related notification (e.g., when the network is restored or has an issue).
• toast.offline(message, options?) — Displays an offline notification (e.g., when the user goes offline).
• toast(message, options?) — Generic/Custom toast A generic toast that allows you to customize the message and options.

Options

You can customize your toasts using the following options: • maxToasts: number — Sets the maximum number of toasts that can be displayed at once (default is 5). • duration — Time in milliseconds before the toast disappears (default: 3000). • className — Custom CSS class for styling the toast. • showIcon — Show or hide the icon in the toast. • pauseOnHover — Pause the toast timer when hovering over the toast. • closeOnClick — Close the toast when it is clicked.
• theme — Set the theme of the toast. Use "dark" for a dark theme or "light" for a light theme. (e.g., theme: "dark").
• transition — Choose the transition effect for the toast. Options include "slide", "zoom", "bounce", or "fade". • showProgressBar: boolean – Toggles the visibility of the progress bar in the toast (default is true). • showCloseButton: boolean – Controls the visibility of the close button in the toast (default is true). • autoClose: boolean – Determines whether the toast should automatically close after a set time (default is true).

Promise Toasts

You can attach toasts to promises to automatically display loading, success, or error messages based on the promise state.

Example :-

const fakeApiCall = new Promise<string>((resolve, reject) => {
setTimeout(() => resolve("Data loaded!"), 2000); // Simulating a successful API call
});

toast.promise(fakeApiCall, {
loading: "Loading data...",          // Message while loading
success: "Data loaded successfully!", // Message when successful
error: "Failed to load data!",       // Message if an error occurs
}); 

This will automatically show:

• Loading: Displays the loading message while the promise is pending.
• Success: Displays the success message once the promise resolves successfully.
• Error: Displays the error message if the promise rejects.

Clear All Toasts

You can remove all active toasts with a single call:

toast.clear();

This will immediately clear all currently visible toasts from the screen.

Positions

You can control where the toast notifications appear on the screen using the following position options:

• TOP_LEFT: 'top-left' — Positions the toast in the top-left corner.
• TOP_CENTER: 'top-center' — Positions the toast in the top-center of the screen.
• TOP_RIGHT: 'top-right' — Positions the toast in the top-right corner.
• BOTTOM_LEFT: 'bottom-left' — Positions the toast in the bottom-left corner.
• BOTTOM_CENTER: 'bottom-center' — Positions the toast in the bottom-center of the screen.
• BOTTOM_RIGHT: 'bottom-right' — Positions the toast in the bottom-right corner.

Transitions

You can customize the transition effect of the toast notification using the following options. The default transition is "slide".

• "slide" — A sliding transition effect for the toast.
• "zoom" — A zooming transition effect for the toast.
• "bounce" — A bouncing transition effect for the toast.
• "fade" — A fading transition effect for the toast.
• "slide-down" — A sliding transition where the toast slides in from the top.
• "zoom-down" — A zooming transition where the toast zooms in from the top.

Choose one of these transitions to apply a custom animation to the toast. If no transition is specified, it will default to "slide".

Example App

Here’s an example of how to integrate react-nice-toast into your React application:

import React from "react";
import { ToastContainer, toast, Position } from "react-nice-toast";
import "react-nice-toast/styles.css";

function App() {
const handlePromiseToast = (state: "success" | "error") => {
const fakeApiCall = new Promise<string>((resolve, reject) => {
setTimeout(() => {
state === "success" ? resolve("Data loaded successfully!") : reject("Failed to load data!");
}, 2000);
});

toast.promise(fakeApiCall, {
loading: "Loading data...",
success: "Data loaded successfully!",
error: "Failed to load data!",
});
};

return (
<div className="min-h-screen bg-gray-100 flex items-center justify-center p-4">
<ToastContainer position={Position.TOP_RIGHT} maxToasts={5} theme="dark" transition="bounce" />

<div className="bg-white p-8 rounded-lg shadow-md space-y-4 max-w-md w-full">
<h1 className="text-2xl font-bold mb-4">  Toast Notifications</h1>

    {/* Buttons for different toast types */}
<button onClick={() => toast.success("Operation completed successfully!")} className="w-full bg-green-500 text-white px-4 py-2 rounded">Success</button>
<button onClick={() => toast.error("Something went wrong!")} className="w-full bg-red-500 text-white px-4 py-2 rounded">Error</button>
<button onClick={() => toast.warning("Please be careful!")} className="w-full bg-yellow-500 text-white px-4 py-2 rounded">Warning</button>
<button onClick={() => toast.info("Here is some information")} className="w-full bg-blue-500 text-white px-4 py-2 rounded">Info</button>
<button onClick={() => toast.loading("Loading...")} className="w-full bg-gray-400 text-white px-4 py-2 rounded">Loading</button>
<button onClick={() => toast.update("Update completed!")} className="w-full bg-indigo-500 text-white px-4 py-2 rounded">Update</button>
<button onClick={() => toast.delete("Item deleted successfully")} className="w-full bg-red-400 text-white px-4 py-2 rounded">Delete</button>
<button onClick={() => toast.upload("Uploading your files...")} className="w-full bg-purple-500 text-white px-4 py-2 rounded">Upload</button>
<button onClick={() => toast.download("Download started")} className="w-full bg-cyan-500 text-white px-4 py-2 rounded">Download</button>
<button onClick={() => toast.network("Network restored")} className="w-full bg-teal-500 text-white px-4 py-2 rounded">Network</button>
<button onClick={() => toast.offline("You are offline")} className="w-full bg-gray-600 text-white px-4 py-2 rounded">Offline</button>
<button onClick={() => toast("Custom styled toast", { className: "border-2 border-purple-300", duration: 4000 })} className="w-full bg-purple-700 text-white px-4 py-2 rounded">Custom Toast</button>

<h2 className="text-xl font-semibold mt-6">Promise Toasts</h2>

    {/* Buttons for Promise Toasts */}
<button onClick={() => handlePromiseToast("success")} className="w-full bg-green-500 text-white px-4 py-2 rounded">Promise Success</button>
<button onClick={() => handlePromiseToast("error")} className="w-full bg-red-500 text-white px-4 py-2 rounded">Promise Error</button>
<button onClick={() => toast.promise(new Promise((resolve) => setTimeout(() => resolve("Loaded!"), 2000)), { loading: "Loading...", success: "Loaded!", error: "Error!" })} className="w-full bg-orange-500 text-white px-4 py-2 rounded">Generic Promise</button>

    {/* Clear all active toasts */}
<button onClick={() => toast.clear()} className="w-full bg-gray-500 text-white px-4 py-2 rounded mt-4">Clear All</button>
  </div>
</div>
);
}

export default App;

Contact

For any questions or support, feel free to reach out:

Email: [email protected]

License

This is a project created by Prabhu Kumar.

Author: Prabhu Kumar
License: All rights reserved. This project is licensed for public use only.

Made with Love ❤️

This project was created with passion and dedication by Prabhu Kumar. I hope you find it useful!