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

Readme

Source

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 yarn

yarn 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.

Keywords

FAQs

What is react-hot-toast?

Is react-hot-toast popular?

Is react-hot-toast well maintained?

Last updated on 28 Apr 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install