premium-toast
v0.1.2
Published
A premium, glassmorphic toast notification library for React and Next.js.
Maintainers
abhay07781Readme
Premium Toast
A beautiful, glassmorphic, animated toast notification library for React and Next.js applications, powered by Framer Motion and Tailwind CSS.
📦 Installation
Since this package uses Framer Motion and Lucide React under the hood, they will be installed automatically for you as dependencies! Just run:
npm install premium-toast(Note: Since this relies on Tailwind CSS, ensure your project has Tailwind configured).
🚀 Setup
Wrap your application (or the part where you want toasts to appear) with the ToastProvider and render the Toaster component.
Next.js App Router (app/layout.tsx):
import { ToastProvider, Toaster } from "premium-toast";
import "./globals.css"; // Your Tailwind CSS
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<ToastProvider>
{children}
<Toaster />
</ToastProvider>
</body>
</html>
);
}💻 Usage
Use the useToast hook anywhere inside the ToastProvider to trigger notifications.
'use client';
import { useToast } from "premium-toast";
export default function MyComponent() {
const toast = useToast();
const handleSave = () => {
toast.success("Your changes have been saved!", {
title: "Success",
position: "top-right"
});
};
const handleError = () => {
toast.error("Failed to connect to the server.");
};
const handlePromise = () => {
const uploadTask = fetch('/api/upload');
toast.promise(uploadTask, {
loading: "Uploading file...",
success: "Upload complete!",
error: "Upload failed."
});
};
return (
<button onClick={handleSave}>Save Settings</button>
);
}📖 API Reference & Types
Because premium-toast is built with TypeScript, you get full autocomplete and type safety out of the box! Here are the core types available:
ToastType
Determines the style and icon of the toast.
type ToastType = 'success' | 'error' | 'warning' | 'info' | 'promise' | 'added' | 'deleted' | 'updated';ToastPosition
Determines where the toast will appear on the screen.
type ToastPosition =
| 'top-left'
| 'top-center'
| 'top-right'
| 'bottom-left'
| 'bottom-center'
| 'bottom-right';ToastOptions
When triggering a toast, you can pass these options to customize it:
interface ToastOptions {
title?: string; // Optional bold title above the message
duration?: number; // Auto-dismiss duration in ms (default: 4000)
position?: ToastPosition; // Override the default position
dismissible?: boolean; // Whether the user can close it manually (default: true)
action?: { // Add a clickable action button
label: string;
onClick: () => void;
};
}🎨 Available Methods on useToast()
toast.success(message, options)toast.error(message, options)toast.warning(message, options)toast.info(message, options)toast.added(message, options)toast.deleted(message, options)toast.updated(message, options)toast.promise(promise, messages, options)toast.dismiss(id)- Dismiss a specific toast programmatically.