React Hot Toast

Add beautiful notifications to your React app

NotificationReact
timolins/react-hot-toastreact-hot-toast.comreact-hot-toast

README

react-hot-toast - Try it out
NPM Version minzipped size Build Status
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()](https://react-hot-toast.com/docs/use-toaster)_

Installation


With yarn


  1. ```sh
  2. yarn add react-hot-toast
  3. ```

With NPM


  1. ```sh
  2. npm install react-hot-toast
  3. ```

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!

  1. ``` js
  2. import toast, { Toaster } from 'react-hot-toast';

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

  6. const App = () => {
  7.   return (
  8.     <div>
  9.       <button onClick={notify}>Make me a toast</button>
  10.       <Toaster />
  11.     </div>
  12.   );
  13. };
  14. ```

Documentation


Find the full API reference on official documentation.