D9-Toast

A lightweight, customizable toast notification library for React applications.

✨ Features

• Lightweight & Customizable – Minimal bundle size with extensive customization options
• React Native – Built specifically for React with hooks support
• No External Dependencies – Pure CSS included, works out of the box
• Multiple Toast Types – Success, error, info, warning, loading, and submit states
• Responsive Design – Modern UI with smooth animations across all devices
• Tailwind CSS Compatible – Optional custom styling via className prop
• Flexible Positioning – 7 different display positions
• Theme Support – Light, dark, and colored themes

📺 Demo

📦 Installation

npm install d9-toast

or

yarn add d9-toast

🚀 Quick Start

1. Wrap your app with ToastProvider

import React from "react";
import { ToastProvider } from "d9-toast";
import App from "./App";

function Root() {
  return (
    <ToastProvider>
      <App />
    </ToastProvider>
  );
}

export default Root;

2. Use toast notifications anywhere

import React from "react";
import { useToast } from "d9-toast";

function MyComponent() {
  const { showToast } = useToast();

  const handleClick = () => {
    showToast({
      message: "Operation completed successfully!",
      type: "success",
      position: "top-right",
      duration: 3000,
    });
  };

  return <button onClick={handleClick}>Show Toast</button>;
}

📖 API Reference

useToast()

Returns an object with toast management methods:

| Method | Description | |--------|-------------| | showToast(options) | Displays a new toast notification | | removeToast(id) | Removes a specific toast by ID | | removeToastAll() | Removes all active toasts |

Toast Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | message | string | React.ReactNode | Required | Toast content (supports JSX) | | type | string | "info" | Toast type: success, error, info, warning, loading, submit | | position | string | "top-right" | Position: top-left, top-right, bottom-left, bottom-right, center, center-top, center-bottom | | theme | string | "light" | Theme: light, dark, colored | | duration | number | 5000 | Auto-close duration in ms (0 = infinite) | | autoClose | boolean | true | Whether toast auto-closes after duration | | closable | boolean | true | Show close (X) button | | pauseOnHover | boolean | true | Pause timer on hover | | pauseOnFocusLoss | boolean | true | Pause timer when window loses focus | | progress | boolean | true | Show progress bar | | title | boolean | true | Show toast header with type | | actions | Array | [] | Action buttons: [{ text: string, callback: function }] | | className | string | "" | Additional CSS/Tailwind classes |

💡 Advanced Usage

Custom Messages with JSX

showToast({
  message: (
    <div>
      <strong>Custom Content</strong>
      <p>With formatted HTML/JSX</p>
    </div>
  ),
  type: "info"
});

Action Buttons

showToast({
  message: "File uploaded successfully",
  type: "success",
  actions: [
    { 
      text: "View", 
      callback: () => console.log("View clicked") 
    },
    { 
      text: "Dismiss", 
      callback: ({ id }) => removeToast(id) 
    }
  ]
});

Manual Control

const { showToast, removeToast, removeToastAll } = useToast();

// Show a persistent toast
const toastId = showToast({
  message: "Processing...",
  type: "loading",
  duration: 0 // Infinite
});

// Remove it later
removeToast(toastId);

// Clear all toasts
removeToastAll();

🎨 Styling

Default CSS

import "d9-toast/dist/toast.css";

Custom Styling

showToast({
  message: "Custom styled toast",
  className: "bg-gradient-to-r from-blue-500 to-purple-600 text-white shadow-xl rounded-lg",
  type: "info"
});

Theme Examples

// Light theme (default)
showToast({ message: "Light", theme: "light" });

// Dark theme
showToast({ message: "Dark", theme: "dark" });

// Colored theme (uses type for color)
showToast({ 
  message: "Colored", 
  theme: "colored", 
  type: "success" 
});

🔧 Development

Build

npm run build

Outputs to dist/ directory:

• dist/index.js – JavaScript bundle
• dist/toast.css – Default styles

Local Development

npm start
# or
npm run dev

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT © [Athul / D9 Coder]

🙏 Acknowledgments

• Inspired by popular notification libraries
• Built with React and modern web standards
• Thanks to all contributors and users

❤️ Support My Work

Donate here → https://rzp.io/rzp/eVnJ0oP

Quick Links:

• Report an Issue
• View Source
• npm Package