Tiny Toast Message

A lightweight, type-safe toast notification system for React applications.

Features

• 🎨 Beautiful pre-designed toast variants (success, error, warning, info)
• 🎯 Full TypeScript support with type safety
• ⚡ Zero dependencies (except React)
• 🎨 No CSS required - works with inline styles
• 🔧 Fully customizable with custom elements
• 📱 Responsive and mobile-friendly
• ♿ Accessible with ARIA labels
• 🪶 Lightweight (~5KB gzipped)

Installation

npm install tiny-toast-message
# or
yarn add tiny-toast-message
# or
pnpm add tiny-toast-message

Usage

1. Import Toaster

import { Toaster } from "tiny-toast-message";

function App() {
  return (
     <div>
      <Toaster />
      <button onClick={() => toast('My first toast')}>My awesome toast</button>
    </div>
  );
}

API

Toast Methods

const toast = useToast();

// Basic toasts
toast.success("Success message");
toast.error("Error message");
toast.warning("Warning message");
toast.info("Info message");
toast.addToast("Default message");

// With options
toast.success("Saved!", {
  description: "Your changes have been saved",
  duration: 5000,
  action: "Undo",
  onAction: () => console.log("Undo clicked"),
});

// Custom element
toast.custom(
  <div>
    <h3>Custom Toast</h3>
    <p>Any React element works here!</p>
  </div>,
  { duration: 5000 }
);

// Persistent toast (manual close only)
toast.info("Important message", { duration: Infinity });

ToastOptions

interface ToastOptions {
  type?: "success" | "error" | "warning" | "info" | "default";
  duration?: number; // milliseconds, or Infinity
  action?: string; // action button label
  onAction?: () => void; // action button callback
  description?: string; // secondary text
  customElement?: ReactNode; // for custom toasts
}

Examples

With Description

toast.success("Upload complete", {
  description: "Your file has been uploaded to the server",
});

With Action Button

toast.info("Item deleted", {
  action: "Undo",
  onAction: () => restoreItem(),
});

Custom Toast

toast.custom(
  <div style={{ display: "flex", gap: "12px" }}>
    <img src="avatar.jpg" style={{ width: "40px", borderRadius: "50%" }} />
    <div>
      <strong>New Message</strong>
      <p>You have a new message from John</p>
    </div>
  </div>
);

License

{
  "repository": {
    "type": "git",
    "url": "https://github.com/kazi331/tiny-toast-message.git"
  },
  "bugs": {
    "url": "https://github.com/kazi331/tiny-toast-message/issues"
  },
  "homepage": "https://github.com/kazi331/tiny-toast-message#readme",
  "author": {
    "name": "Kazi Shariful Islam",
    "email": "[email protected]",
    "url": "https://kazi331.vercel.app"
  }
}