🚀 SBNotification Documentation

A simple JavaScript notification library with sound & accent color support.

📥 Installation

Include the script in your project:

<script src="sb-notification.js"></script>

OR

<script src="sb-notification.min.js"></script>

âš¡ How to Use

Call the `SBNotification.show()` function with an object:

SBNotification.show({
    message: 'Notification Text',
    title: 'Notification Title', //Optional, default: 'Notification'. `showTitle = true` required to show title
    showTitle: true, //Optional, default: false
    duration: 5, // Optional, default: 5
    showTime: false, // Optional, default: true
    accentColor: '#00ffff', // Optional, default: '#00ffff'
    bgColor: '#222', // Optional
    textColor: '#fff', // Optional
    textAlign: 'left', // Optional
    sound: null, // Optional, default: null
    position: 'right-top', // Optional
    autoHide: true, // Optional, default: true
    combine: true, // Optional, default: true
    width = '300px', // Optional, default: 300px
    onClose: () => { 
                // write your callback handling code
                console.log('Center Notification closed'); 
                alert('Notification closed!'); 
            }  // Optional, default: null
});

📌 Parameters

🔧 Examples

// Default Notification
SBNotification.show({
    message: 'Default = This is a default notification'
});
        
// Custom Sound Notification
SBNotification.show({
    message: 'Custom = This is a custom notification',
    duration: 15,
    accentColor: '#ff0000',
    sound: 'success.wav'
});
        
// Custom Notification with Timer and Sound
SBNotification.show({
    message: 'Custom = This is a custom notification with timer and sound',
    duration: 15,
    showTime: true,
    accentColor: '#ff0000',
    sound: 'success.wav'
});
        
// Notification without Timer
SBNotification.show({
    message: 'No Timer = No timer counter notification',
    accentColor: '#00ff00',
    sound: 'error.wav'
});
        
// Notification with Custom Background and Text Color
SBNotification.show({
    message: 'Custom Background & Text Color',
    bgColor: '#333',
    textColor: '#ffcc00',
    duration: 10
});
        
// Notification with Auto-Hide Disabled
SBNotification.show({
    message: 'Auto-Hide Disabled',
    autoHide: false,
    duration: 10
});
        
// Notification with Combine Disabled
SBNotification.show({
    message: 'Combine Disabled',
    combine: false,
    duration: 10
});
        
// Notification with custom width
SBNotification.show({
    message: 'Notification with custom width',
    width:'700px',
    duration: 10,
    position: 'center-top'
});
        
// Notification with Custom Position (Right Top)
SBNotification.show({
    message: 'Right Top Notification',
    accentColor: '#00ff00',
    sound: 'error.wav',
    position: 'right-top'
});
        
// Notification with Custom Position (Center)
SBNotification.show({
    message: 'Center Notification',
    combine: false,
    showTime: true,
    accentColor: '#00ff00',
    sound: 'error.wav',
    position: 'center',
    autoHide: false
});
        
// Notification with onCallback (Center)
SBNotification.show({
    message: 'onCallback Notification',
    onClose: () => {
                SBNotification.show({
                    message: 'Callback success'
                });
            }
});