react-hot-toast
A small React library for showing pop-up toast notifications with minimal setup.
- Stars
- 11k
- Forks
- 376
- Licence
- MIT
- Language
- TypeScript
- Last update
- 2 months ago
- Type
- Library
What it is
react-hot-toast is a React library that shows short pop-up messages, often called toasts, to tell users something happened, such as a save succeeding or an error occurring. You add a Toaster component once to your app, then call the toast function from anywhere to display a message. The README describes it as lightweight and customizable, with a promise helper that shows a loader while a promise is pending.
- Show a confirmation message after a form is submitted
- Display a loading toast while an API request runs, then a success or error toast when it finishes
- Build a custom notification look using the headless useToaster hook
Great for
- React developers who need simple notification messages in a web app
- Projects that want a small notification library instead of a larger UI kit
- Developers who want to build their own notification UI using the headless hooks
- Teams wanting a promise-based loading toast for async actions
Not ideal for
- Projects not using React, since the library is built specifically for it
- Apps needing complex, persistent notification centers, as the README focuses on transient toasts
- Developers who want a complete design system, since it covers notifications only
How to get it
- 1
Install with a package manager
You'll need: Node.js and npm or pnpm · React project
Install with pnpm
pnpm add react-hot-toastInstall with npm
npm install react-hot-toast - 2
Run it
- Install the package with pnpm or npm
- Import toast and Toaster from 'react-hot-toast'
- Render <Toaster /> once in your app
- Call toast('Your message') from a click handler or anywhere in your code
- 3
Get the most out of it
- Use the Promise API to show automatic loading, success, and error states for async work
- Use the useToaster hook to build fully custom notification UI
- Read the full API reference on the official documentation site for options
- Check the project homepage at react-hot-toast.com for examples
Downloads
Strengths
- Simple setup: add one Toaster component and call toast() from anywhere
- The README lists a bundle size under 5kb including styles
- Includes an accessibility feature and a promise API for automatic loaders
Trade-offs
- The README is short on detail about advanced configuration; the full API lives in the external docs site
- Notifications are transient by design, so it is not a fit for persistent alerts
- Relies on React, so it cannot be used in other frameworks
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| react-hot-toast (this) | 11k | Library | beginner | 2 months ago | React developers who need simple notification messages in a web app |
| react-toastify | 13.4k | Library | beginner | 8 days ago | React developers who need simple on-screen notifications |
| sonner | 13.1k | Library | beginner | 3 months ago | React developers who want quick, good-looking notifications without building their own |
| sweetalert2 | 18.1k | Library | beginner | 9 days ago | Web developers who want nicer popups than the browser's built-in alert and confirm boxes |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.