A lightweight, accessible, customizable, and beautiful toast notification component with Headless Hooks and Promise API.
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> ); };