Sleek Toast & Growl Alert Notification Library – Nostfly.js

Preview:

Description:

Nostfly is a lightweight JavaScript notifications library designed for creating sleek, customizable, non-intrusive, user-friendly, toast- and growl-style alerts.

It is ideal for modern web applications requiring non-blocking alerts:

• Display real-time updates during form submissions
• Show system alerts without interrupting active tasks
• Send timed reminders for user actions
• Render status messages for API responses

Features:

• Multiple notification styles including standard, warning, success, error, attention, and note variants
• Flexible positioning with six preset options: top-right, top-left, top-center, bottom-right, bottom-left, and bottom-center
• Customizable animation sequences for entrance and exit transitions
• Auto-dismiss functionality with visual countdown indicators
• Full HTML support in notification headers and content
• Custom styling through CSS classes and direct color properties

How to use it:

1. Install & download Nostfly with NPM.

# NPM
$ npm install nostfly

2. Add the Nostfly CSS and JavaScript files to your webpage:

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

3. Create a simple alert with a custom title and content:

new Nostfly({
  header: 'Supports HTML',
  content: 'Supports HTML',
})

4. Change the notification type using the ‘style’ option:

new Nostfly({
  // 'warning', 'success', 'error', 
  //'attention', 'notify' (default), 'note'
  style: 'success' 
    
});

5. Control where notifications appear:

new Nostfly({
  // 'top-right' (default), 'top-left', 'top-center', 
  // 'bottom-right', 'bottom-left', 'bottom-center'
  position: 'bottom-right'
});

6. Customize the open and close animations:

new Nostfly({
  // Or: 'nostfly-open-slide-left', 'nostfly-open-slide-down', 'nostfly-open-fade'
  openAnimate: 'nostfly-open-slide-up', 
  // Or: 'nostfly-close-slide-left', 'nostfly-close-slide-up', 'nostfly-close-slide-down', 'nostfly-close-fade'
  closeAnimate: 'your-custom-class'   
});

7. Enable auto-dismiss functionality and set a delay for the notification to disappear automatically.

new Nostfly({
    auto: true,
    delay: 4000
})

8. Show a countdown bar indicating the time left before auto-dismiss.

new Nostfly({
    loader: true,
    loaderPosition: 'top'
})

9. Hide the notification icon for a cleaner look.

new Nostfly({
    iconHeader: false
})

10. You can apply your own styles to the notifications:

new Nostfly({
    class: 'custom-class',
    background: '#F85525',
    color:'#FBFAF2',
})

Changelog:

03/03/2025

• v1.0.2