Interactive Toast Notification Demo

Next.js Guide

To get started with Next.js, follow these steps:

'use client';

import React from 'react';
import { ToastContainer, ToastProvider } from 'react-smooth-toast';
import 'react-smooth-toast/style.css';


export function ToastWrapper({ children }: { children: React.ReactNode }) {
  return (
    <ToastProvider>
      {children}
    <ToastContainer position='top-right' variant='progress' pauseOnHover={true} groupCount={3} groupId='group-id'/>
    </ToastProvider>
  );
}
    

Start using the toast component in your project:

import { useToast } from 'react-smooth-toast'

const { success } = useToast()

success({
  message: 'This is a toast notification',
  variant: 'minimal',
  position: 'top-right'
})