Adding toast

How to add toast in React/Next JS

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

----

Install

npm install react-hot-toast

Add toast

Adding Toaster To root Layout

import { Toaster } from 'react-hot-toast'; 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'; 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