react-hot-toast

What is react-hot-toast?

react-hot-toast is a lightweight and customizable toast notification library for React applications. It provides a simple API to create and manage toast notifications with various customization options.

What are react-hot-toast's main functionalities?

Basic Toast Notification

This feature allows you to display a basic toast notification with a simple message. The `Toaster` component is used to render the toast notifications.

import toast, { Toaster } from 'react-hot-toast';

function App() {
  return (
    <div>
      <button onClick={() => toast('Hello, World!')}>Show Toast</button>
      <Toaster />
    </div>
  );
}

Custom Toast Notification

This feature allows you to customize the toast notification with various options such as duration, position, and styles.

import toast, { Toaster } from 'react-hot-toast';

function App() {
  return (
    <div>
      <button onClick={() => toast('Custom Toast', {
        duration: 4000,
        position: 'top-center',
        style: {
          background: '#333',
          color: '#fff',
        },
      })}>Show Custom Toast</button>
      <Toaster />
    </div>
  );
}

Promise-based Toast Notification

This feature allows you to display toast notifications based on the state of a promise. It shows different messages for loading, success, and error states.

import toast, { Toaster } from 'react-hot-toast';

function App() {
  const handleClick = () => {
    const myPromise = new Promise((resolve, reject) => {
      setTimeout(() => resolve('Success!'), 2000);
    });

    toast.promise(myPromise, {
      loading: 'Loading...',
      success: 'Success!',
      error: 'Error!',
    });
  };

  return (
    <div>
      <button onClick={handleClick}>Show Promise Toast</button>
      <Toaster />
    </div>
  );
}

Other packages similar to react-hot-toast

react-toastify

react-toastify is another popular toast notification library for React. It offers similar functionality to react-hot-toast, including customizable toasts and promise-based notifications. However, react-toastify has a larger bundle size compared to react-hot-toast.

notistack

notistack is a highly customizable notification library for React. It allows stacking of notifications and provides a flexible API for managing notifications. Compared to react-hot-toast, notistack offers more advanced features like stacking and dismissing notifications programmatically.

react-notifications-component

react-notifications-component is a library for creating customizable notifications in React. It provides a variety of notification types and customization options. While it offers similar functionality to react-hot-toast, it has a more complex API and larger bundle size.

README

Smoking hot Notifications for React.

Lightweight, customizable and beautiful by default.

Website · Documentation · Twitter

_{Cooked by Timo Lins 👨‍🍳}

Features

• 🔥 Hot by default
• 🔩 Easily Customizable
• ⏳ Promise API - Automatic loader from a promise
• 🕊 Lightweight - less than 5kb including styles
• ✅ Accessible
• 🤯 Headless Hooks - Create your own with useToaster()

Installation

With pnpm

pnpm add react-hot-toast

With NPM

npm install react-hot-toast

Getting Started

Add the Toaster to your app first. It will take care of rendering all notifications emitted. Now you can trigger toast() from anywhere!

import toast, { Toaster } from 'react-hot-toast';

const notify = () => toast('Here is your toast.');

const App = () => {
  return (
    <div>
      <button onClick={notify}>Make me a toast</button>
      <Toaster />
    </div>
  );
};

Documentation

Find the full API reference on official documentation.