✨ Spark Toast

A lightweight, glowing vanilla JavaScript toast notification library.

No dependencies.
No configuration.
Auto-injected styles.
Framework agnostic.

🚀 Installation

npm install spark-toast

📦 Basic Usage

import { showToast } from "spark-toast";

showToast("Added successfully!", "success");
showToast("Something went wrong!", "error");
showToast("This is an informational message.", "info");

🧩 API

showToast(message, type?, duration?)

| Parameter | Type | Default | Description | |------------|--------|------------|-------------| | message | string | — | Text displayed inside the toast | | type | string | "success" | success | error | info | | duration | number | 3000 | Auto-dismiss time in milliseconds |

🛠 Example With Custom Duration

showToast("Saved successfully!", "success", 5000);

🎨 Features

• ✔ Success / Error / Info variants
• ✔ Glowing animated icons
• ✔ Smooth slide & scale animation
• ✔ Auto-dismiss timer
• ✔ Pause on hover
• ✔ Multi-line message support
• ✔ Auto style injection (no CSS import needed)
• ✔ Zero dependencies
• ✔ Lightweight and fast

⚛️ Using With React

import { showToast } from "spark-toast";

function App() {
  return (
    <button onClick={() => showToast("Saved!", "success")}>
      Show Toast
    </button>
  );
}

export default App;

Works with:

• React
• Next.js (Client Components)
• Vue
• Angular
• Vite
• Plain JavaScript projects

⚠️ For Next.js App Router, use inside a client component ("use client").

🌐 Framework Agnostic

Spark Toast works anywhere JavaScript runs in the browser.

No provider.
No wrapper.
No setup required.

📄 License

MIT © Manoj Annadurai

💡 Why Spark Toast?

Spark Toast is designed to be:

• Minimal
• Clean
• Fast
• Easy to integrate
• Production ready

A small spark of feedback for your UI 🔥