🔥 FuseNotify

FuseNotify is a lightweight JavaScript + CSS notification library with a burning fuse effect.
Perfect for Laravel, React, or plain HTML apps.

---

✨ Features

• ✅ Success & Error notifications
• ✅ Auto-dismiss with countdown fuse effect
• ✅ Configurable display time
• ✅ Position control: top-right, top-left, bottom-right, bottom-left
• ✅ No dependencies (just plain JS + CSS)

---

📦 Installation

Copy the library files into your project:

public/
fusenotify/
fusenotify.css
fusenotify.js

Include in your HTML / layout:

<link rel="stylesheet" href="/fusenotify/fusenotify.css">
<script src="/fusenotify/fusenotify.js"></script>

---

🚀 Usage

<!-- Example buttons -->
<button onclick="FuseNotify.success('Success message!', 4000, 'top-right')">Show Success</button>
<button onclick="FuseNotify.error('Error message!', 4000, 'bottom-left')">Show Error</button>

API

FuseNotify.success(message, duration, position);
FuseNotify.error(message, duration, position);

• message → string (your text)
• duration → number (ms before auto-hide, e.g. 4000)
• position → string (top-right | top-left | bottom-right | bottom-left)

---

🛠 Usage in Laravel

1. Add Assets

Place fusenotify.css and fusenotify.js in public/fusenotify/.

2. Include in app.blade.php

<link rel="stylesheet" href="{{ asset('fusenotify/fusenotify.css') }}">
<script src="{{ asset('fusenotify/fusenotify.js') }}"></script>

<script>
  @if(session('success'))
    FuseNotify.success("{{ session('success') }}", 4000, 'top-right');
  @endif

  @if(session('error'))
    FuseNotify.error("{{ session('error') }}", 4000, 'top-right');
  @endif
</script>

3. Controller Example

public function store(Request $request)
{
    // Save something...
    return redirect()->back()->with('success', 'Data saved successfully!');
}

public function destroy($id)
{
    return redirect()->back()->with('error', 'Could not delete item!');
}

---

⚛️ Usage in React

Import the CSS & JS (or include via <script> in public/index.html).

function App() {
  return (
    <div>
      <button onClick={() => window.FuseNotify.success("Saved!", 4000, "top-right")}>
        Success
      </button>
      <button onClick={() => window.FuseNotify.error("Failed!", 4000, "bottom-left")}>
        Error
      </button>
    </div>
  );
}

---

📸 Demo

<button onclick="FuseNotify.success('Top Right!', 4000, 'top-right')">Top Right</button>
<button onclick="FuseNotify.error('Top Left!', 4000, 'top-left')">Top Left</button>
<button onclick="FuseNotify.success('Bottom Right!', 4000, 'bottom-right')">Bottom Right</button>
<button onclick="FuseNotify.error('Bottom Left!', 4000, 'bottom-left')">Bottom Left</button>

---

📖 License

You are free to use it in personal and commercial projects.