Hai-Notification

A lightweight, flexible, and feature-rich notification library for modern web applications. Built with vanilla JavaScript, zero dependencies.

✨ Features

• 🎨 Rich Customization

  • Multiple themes (light/dark)
  • Flexible positioning
  • Beautiful animations
  • Progress bar
  • Custom duration

• 📦 Content Types

  • Text messages
  • HTML content
  • Images
  • Custom templates

• 🛠 Developer Experience

  • Zero dependencies
  • Simple API
  • Event handling
  • UMD support
  • jQuery support

📦 Installation

NPM

npm install hai-notify

CDN

<script src="https://unpkg.com/[email protected]/dist/notify.min.js"></script>

🚀 Quick Start

// Initialize
const notification = new HaiNotification();

// Show a simple notification
notification.show({
    title: 'Hello!',
    content: 'Welcome to Hai-Notification'
});

// Show different types
notification.success('Operation successful!');
notification.error('Something went wrong');
notification.warning('Please be careful');
notification.info('Just FYI');

📖 Usage Guide

Position & Animation

notification.show({
    title: 'Custom Position',
    content: 'Bottom left with slide-up animation',
    position: 'bottom-left',
    animation: 'slide-up'
});

Duration & Progress

notification.show({
    content: '5 seconds with progress bar',
    duration: 5000,
    showProgress: true
});

Rich Content

// HTML Content
notification.show({
    title: 'HTML Example',
    content: '<strong>Bold</strong> and <em>italic</em>',
    contentType: 'html'
});

// Image Content
notification.show({
    title: 'Image Example',
    content: 'path/to/image.jpg',
    contentType: 'image'
});

// Custom Template
notification.show({
    title: 'Template Example',
    content: 'Custom content',
    template: ({ title, content }) => `
        <div class="my-title">${title}</div>
        <div class="my-content">${content}</div>
    `
});

jQuery Integration

If you're using jQuery, you can easily integrate Hai-Notification:

<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Include Hai-Notification -->
<script src="https://unpkg.com/[email protected]/dist/notify.min.js"></script>

// jQuery Plugin
(function($) {
    $.notification = new HaiNotification();
    
    // Add jQuery methods
    $.extend({
        notify: function(options) {
            return $.notification.show(options);
        },
        notifySuccess: function(message, title) {
            return $.notification.success(message, title);
        },
        notifyError: function(message, title) {
            return $.notification.error(message, title);
        },
        notifyWarning: function(message, title) {
            return $.notification.warning(message, title);
        },
        notifyInfo: function(message, title) {
            return $.notification.info(message, title);
        }
    });
})(jQuery);

// Usage with jQuery
$.notify({
    title: 'Hello jQuery!',
    content: 'Notification using jQuery'
});

// Shorthand methods
$.notifySuccess('Operation successful!');
$.notifyError('Something went wrong');
$.notifyWarning('Please be careful');
$.notifyInfo('Just FYI');

⚙️ Configuration

Initialization Options

Create a notification instance with custom default settings:

const notification = new HaiNotification({
    position: 'top-right',
    animation: 'scale-up',
    // ... other options
});

Available Options

Option	Type	Default	Description
position	string	'top-right'	Notification position: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center'
animation	string	'scale-up'	Animation type: 'scale-up', 'slide-up', 'slide-down', 'fade-in'
theme	string	'light'	Color theme: 'light' or 'dark'
duration	number	3000	How long notification stays visible (in milliseconds)
showProgress	boolean	true	Show/hide the progress bar
maxNotifications	number	5	Maximum number of concurrent notifications
spacing	string	'1rem'	Space between notifications
width	string	'24rem'	Width of notifications
zIndex	number	1000	Z-index for notifications
container	Element	document.body	Container element for notifications
customStyles	object	{}	Custom CSS styles object
template	function	null	Default template function
onShow	function	null	Callback when notification appears
onClose	function	null	Callback when notification closes
onClick	function	null	Callback when notification is clicked

Show Options

Options available when showing a notification:

notification.show({
    type: 'success',
    title: 'Hello',
    content: 'World'
});

Available Show Options

Option	Type	Default	Description
type	string	'info'	Notification type: 'info', 'success', 'warning', 'error'
title	string	''	Notification title (optional)
content	string	''	Main notification content
contentType	string	'text'	Content type: 'text', 'html', 'image'
position	string	*	Override default position
animation	string	*	Override default animation
theme	string	*	Override default theme
duration	number	*	Override default duration
showProgress	boolean	*	Override progress bar setting
customClass	string	''	Additional CSS classes
customStyle	object	{}	Inline styles for this notification
onClick	function	null	Click handler for this notification
onClose	function	null	Close handler for this notification

* Inherits from initialization options

🌐 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

📄 License

MIT License Haikal Fiqih

🤝 Contributing

Contributions are welcome! Please feel free to submit issues and pull requests.