Dynamic Toast - Dynamic Island Style Notification

Library JavaScript sederhana untuk membuat notifikasi bergaya Dynamic Island dengan 6 posisi penempatan yang dapat dikustomisasi.

Fitur

• 6 Posisi Penempatan: Top/Bottom × Left/Center/Right
• 4 Tipe Notifikasi: Success, Error, Info, dan Loading
• Auto-close dengan Counter: Timer visual yang dapat dikustomisasi
• Animasi Smooth: Transisi dan animasi yang halus
• Responsive: Bekerja di semua ukuran layar
• Tanpa Dependencies: Pure JavaScript dan CSS, tidak perlu framework atau Tailwind
• Ringan: Total < 15KB (JS + CSS)
• CSS Independen: Styling lengkap tanpa perlu Tailwind CSS

Prerequisites

• Browser modern dengan dukungan ES6 (Chrome, Firefox, Safari, Edge)
• Tidak ada dependencies eksternal yang diperlukan

Instalasi via npm

npm install dynamic-toast
# atau
yarn add dynamic-toast
# atau
pnpm add dynamic-toast

Import (Bundler)

import DynamicIsland from "dynamic-toast";

// CSS default sudah di-inject oleh JS.
// Import file ini jika ingin override lewat stylesheet.
import "dynamic-toast/lib/dynatoast.css";

Cara Penggunaan

Untuk penggunaan via bundler/npm, lihat bagian "Instalasi via npm".

1. Include Library (tanpa bundler)

Tambahkan CSS dan JavaScript ke dalam HTML Anda:

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

2. Inisialisasi

Buat instance baru dari DynamicIsland:

const island = new DynamicIsland({
    duration: 3000,      // Durasi tampil dalam milidetik (default: 5000)
    position: "top-center"  // Posisi awal (default: "top-center")
});

3. Tampilkan Notifikasi

Gunakan method notify() untuk menampilkan notifikasi:

// Notifikasi success
island.notify({
    type: 'success',
    title: 'Berhasil!',
    message: 'Data berhasil disimpan.'
});

// Notifikasi error
island.notify({
    type: 'error',
    title: 'Error!',
    message: 'Gagal menyimpan data.'
});

// Notifikasi info
island.notify({
    type: 'info',
    title: 'Informasi',
    message: 'Ada pembaruan tersedia.'
});

// Loading state (tanpa auto-close)
island.notify({
    type: 'loading',
    title: 'Memproses',
    message: 'Mohon tunggu...'
});

4. Ubah Posisi

Anda dapat mengubah posisi notifikasi secara dinamis:

island.setPosition('bottom-right');

Posisi yang tersedia:

• top-left
• top-center
• top-right
• bottom-left
• bottom-center
• bottom-right

5. Menutup Notifikasi

Tutup notifikasi secara manual:

island.close();

API Reference

Constructor Options

new DynamicIsland(options)

| Option | Type | Default | Deskripsi | |--------|------|---------|-----------| | duration | Number | 5000 | Durasi tampil notifikasi (ms) | | position | String | "top-center" | Posisi awal notifikasi |

Methods

notify(config)

Menampilkan notifikasi baru.

Parameters:

{
    type: 'success' | 'error' | 'info' | 'loading',
    title: string,
    message: string
}

setPosition(position)

Mengubah posisi notifikasi.

Parameters:

• position (String): Salah satu dari 6 posisi yang tersedia

close()

Menutup notifikasi secara manual.

Contoh Penggunaan

Contoh 1: Form Submission

const island = new DynamicIsland({ duration: 3000 });

document.getElementById('myForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    
    // Tampilkan loading
    island.notify({
        type: 'loading',
        title: 'Mengirim',
        message: 'Menyimpan data...'
    });
    
    try {
        await saveData();
        
        // Tampilkan success
        island.notify({
            type: 'success',
            title: 'Berhasil',
            message: 'Data berhasil disimpan!'
        });
    } catch (error) {
        // Tampilkan error
        island.notify({
            type: 'error',
            title: 'Gagal',
            message: 'Terjadi kesalahan saat menyimpan data.'
        });
    }
});

Contoh 2: Multiple Notifications

const island = new DynamicIsland({
    duration: 2000,
    position: 'bottom-right'
});

// Notifikasi pertama
island.notify({
    type: 'info',
    title: 'Selamat Datang',
    message: 'Aplikasi siap digunakan'
});

// Setelah beberapa detik, notifikasi kedua
setTimeout(() => {
    island.notify({
        type: 'success',
        title: 'Update',
        message: 'Data telah dimuat'
    });
}, 3000);

Kustomisasi

Library ini menggunakan CSS yang dapat di-override dengan mudah. Anda dapat:

1. Mengubah warna icon: Edit class .di-icon-success, .di-icon-error, .di-icon-info di dynatoast.css
2. Mengubah posisi: Sesuaikan class .di-pos-* untuk mengubah jarak dari tepi layar
3. Mengubah animasi: Edit keyframes di-float, di-pulse, dan di-spin
4. Mengubah ukuran: Sesuaikan .di-base.active untuk dimensi toast yang lebih besar/kecil

Contoh Kustomisasi

/* Ubah warna success menjadi hijau lebih terang */
.di-icon-success {
  background-color: #22c55e;
}

Demo

Buka index.html di browser untuk melihat demo interaktif:

# Dengan Python
python -m http.server 8000

# Dengan Node.js
npx serve

# Atau langsung buka file
open index.html  # macOS
xdg-open index.html  # Linux
start index.html  # Windows

Kemudian buka browser di http://localhost:8000

Browser Support

• Chrome/Edge 88+
• Firefox 87+
• Safari 14+
• Opera 74+

Library menggunakan ResizeObserver, CSS Custom Properties, dan modern JavaScript features.

Struktur folder:

dynamic-toast/
├── index.html              # File demo
├── lib/
│   ├── dynatoast.js        # Library JavaScript
│   └── dynatoast.css       # Styling independen (tanpa Tailwind)
└── README.md               # Dokumentasi

Testing

Buka index.html di browser untuk melihat demo interaktif:

# Dengan Python
python -m http.server 8000

# Dengan Node.js
npx serve

# Atau langsung buka file
open index.html  # macOS
xdg-open index.html  # Linux
start index.html  # Windows

Kemudian buka browser di http://localhost:8000

FAQ

Q: Apakah perlu Tailwind CSS?
A: Tidak. Library ini sudah include CSS independen (dynatoast.css) yang tidak memerlukan Tailwind.

Q: Bisakah menampilkan multiple toast sekaligus?
A: Saat ini library menampilkan satu toast pada satu waktu. Toast baru akan menggantikan yang lama dengan animasi pulse.

Q: Bagaimana cara mengubah durasi timer?
A: Set option duration saat inisialisasi (dalam milidetik).

Q: Loading state tidak auto-close?
A: Ya, loading state harus ditutup manual dengan island.close() atau dengan menampilkan notifikasi baru.

License

MIT License - Bebas digunakan untuk proyek pribadi maupun komersial.

Kontributor

Kontribusi dan pull request sangat diterima. Silakan buat issue untuk bug report atau feature request.