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

1pnpm add react-hot-toast

With NPM

1npm 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!

1import toast, { Toaster } from 'react-hot-toast';
2
3const notify = () => toast('Here is your toast.');
4
5const App = () => {
6  return (
7    <div>
8      <button onClick={notify}>Make me a toast</button>
9      <Toaster />
10    </div>
11  );
12};

Documentation

Find the full API reference on official documentation.