Toast Use react-hot-toast to trigger animated toast messages

This lesson is available for PRO members or as a single course purchase. Sign-in and choose a plan below.
Get Unlimited PRO Access

OR


*Enrollment provides full access to this course (and updates) for life.

Install Hot Toast

command line 
npm i react-hot-toast

Check out the official docs.

Declare the Toaster

file_type_js_official pages/_app.js 
import Navbar from '../components/Navbar';
import { Toaster } from 'react-hot-toast';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Navbar />
      <Component {...pageProps} />
      <Toaster />
    </>
  );
}

Trigger a Toast Message

file_type_js_official pages/index.js 
import toast from 'react-hot-toast';

export default function Home() {
  return (
    <div>
      <button onClick={() => toast.success('hello toast!')}>
        Toast Me
      </button>
    </div>
  );
}
👈 Navbar
Auth Intro 👉

Questions?

Ask questions via GitHub below OR chat on Slack #questions