🧈 Toast

Use react-hot-toast to trigger animated toast messages

Install Hot Toast

command line
npm i react-hot-toast

Check out the official docs.

Declare the Toaster

file_type_js 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 pages/index.js
import toast from 'react-hot-toast';

export default function Home() {
  return (
      <button onClick={() => toast.success('hello toast!')}>
        Toast Me

Questions? Let's chat

Open Discord