How to add toast

How to add toast in React/Next JS

April 29, 2024 (1y 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