How to add toast

How to add toast in React/Next JS

April 29, 2024 (7mo ago) | šŸ“– 1 min read

Update: Dec 09, 2024

Install

# react-hot-toast
# bun add react-hot-toast

bun add sonner

Add toast

Adding Toaster To root Layout

// import { Toaster } from 'react-hot-toast';
import { Toaster } from 'sonner';

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang='en'>
      <body className={inter.className}>
        <div className='container'></div>
        {children}
        <Toaster position='top-right' />
      </body>
    </html>
  );
}

Using toast in Components

// import toast from 'react-hot-toast';
import { toast } from 'sonner';

const handleClick = () => {
  toast.success('This is a success toast');
};

export default function App() {
  return (
    <div>
      <button onClick={handleClick}>Show Toast</button>
    </div>
  );
}

Add toast with options

Types

  • Success
  • Error
  • Loading

Example

toast.success('This is a success toast');
toast.error('This is an error toast');
toast.loading('This is a loading toast');

Link