DrToast (dichvuright-toast)

A portable, premium Sonner-inspired toast notification system for React and Next.js.

Features

• Sonner-style API: Simple and flexible.
• Rich Content: Support for Titles, Descriptions, and Action buttons.
• Premium Aesthetics: Smooth animations and clean design.
• NPM-Ready: Fully portable and easy to install.
• TypeScript: Built with strict type safety.
• SSR Safe: Works perfectly with Next.js Server Components and Hydration.

Installation

npm install dichvuright-toast
# or
yarn add dichvuright-toast

Usage

1. Add the Toaster component

Add the <Toaster /> component to your root layout or app component.

import { Toaster } from 'dichvuright-toast';

function App() {
  return (
    <>
      <Toaster position="top-right" />
      <Component {...pageProps} />
    </>
  );
}

2. Use the drToast function

Import drToast to trigger notifications from anywhere in your app.

import { drToast } from 'dichvuright-toast';

// Simple toast
drToast("Hello World!");

// Success toast
drToast.success("Task completed!", {
  description: "Your file has been uploaded successfully.",
  action: {
    label: "Undo",
    onClick: () => console.log("Undo!")
  }
});

// Error toast
drToast.error("Failed to save changes.");

// Advanced configuration
drToast("Event Created", {
  description: "Sunday, December 03, 2023 at 9:00 AM",
  duration: 5000,
});

// Custom Styling
drToast.success("Premium Notification", {
  fontFamily: "'Outfit', sans-serif",
  fontSize: "14px",
  className: "my-custom-toast",
  iconTheme: {
    primary: "#10b981",
    secondary: "#ecfdf5",
    size: "24px"
  }
});

// Fully Customized
drToast("Account Updated", {
  title: "Security Settings",
  description: <span>Two-factor authentication has been <b>enabled</b>.</span>,
  icon: <span>🔒</span>, // Custom icon
  isClose: true,
  action: {
    label: "Review",
    onClick: () => window.location.href = "/settings"
  }
});

API

drToast(message, options)

• message: string | ReactNode
• options:
  • title: string
  • description: string | ReactNode
  • action: { label: string, onClick: (event) => void }
  • duration: number (default: 3000ms)
  • icon: ReactNode
  • iconTheme: { primary?: string, secondary?: string, size?: string }
  • fontFamily: string
  • fontSize: string
  • isClose: boolean
  • className: string
  • success: ToastOptions (Overrides for success type)
  • error: ToastOptions (Overrides for error type)
  • warning: ToastOptions (Overrides for warning type)
  • info: ToastOptions (Overrides for info type)

License

MIT