tiny-notify

🔔 Tiny Notify

Super lightweight, dependency-free toast/notification system for the web.

🚀 Features

• ✅ Zero dependencies, ultra-lightweight
• ✅ Multiple positions (top-right, bottom-left, top-center, etc.)
• ✅ Toast types: info, success, warning, error
• ✅ Auto-dismiss with configurable timeout
• ✅ Sticky toasts (timeout: 0 or Infinity)
• ✅ Hover to pause, dismiss button
• ✅ Progress bar option
• ✅ Limit max toasts per position
• ✅ Works with CDN or bundlers

📦 Installation

1. Use in a bundler (ESM/TypeScript)

npm install tiny-notify

Import in your app:

import TinyNotify from "tiny-notify";

TinyNotify.success("Hello from bundler!", 
    { 
        position: "bottom-right", 
        timeout: 2500
    }
);

1. Use in CDN (for plain HTML)

<script src="https://cdn.jsdelivr.net/gh/rohit-chouhan/tiny-notify/dist/tiny-notify.js"></script>

Now TinyNotify is available globally:

<button onclick="TinyNotify.success('Saved successfully!', { position: 'top-right', timeout: 2000 })">
  Show Success
</button>

⚡ Usage Examples

Basic Example

TinyNotify.show("Hello World!");

Different Types

TinyNotify.success("Operation successful!");
TinyNotify.error("Something went wrong...");
TinyNotify.info("Here is some info");
TinyNotify.warning("Be careful!");

Options

TinyNotify.show("Custom notification", {
  type: "info",          // success | error | warning | info
  position: "bottom-left", // top-right | top-left | bottom-right | bottom-left | top-center | bottom-center
  timeout: 4000,         // ms; 0 or Infinity = sticky
  dismissible: true,     // show × button
  showProgress: true,    // progress bar
  maxPerPosition: 3      // auto-trim old toasts
});

Set Defaults (globally)

TinyNotify.setDefaults({
  position: "top-right",
  timeout: 3000,
  maxPerPosition: 4
});

Clear All

TinyNotify.clear(); // removes all toasts

Demo

👉 Live Playground https://tiny-notify.js.org/

Copyright and License

Copyright © 2025 Rohit Chouhan. Licensed under the MIT LICENSE.