Notice.js

A beautiful and modern, yet fully customizable notification library.

🎮 Try It Live

• Interactive Demo - Comprehensive demo with all features (open examples/demo.html in your browser)
• Online Demo - Live demo on GitHub Pages (if enabled)

Features

• 🎨 Beautiful and customizable design
• 📱 Responsive and mobile-friendly
• ⚡ Lightweight and fast
• 🎭 Support for CSS animations
• ⏱️ Auto-close with configurable timeout
• 📊 Progress bar indicator
• 🎯 Multiple positions (topLeft, topRight, bottomLeft, bottomRight, etc.)
• 🔔 Multiple notification types (success, error, warning, info)
• 🌐 RTL (Right-to-Left) language support

Installation

NPM

npm install notice.js --save

Direct Download

Download from GitHub releases or latest snapshot

Quick Start

1. Include Stylesheet

<link rel="stylesheet" href="node_modules/notice.js/dist/noticejs.css" />
<!-- or -->
<link rel="stylesheet" href="dist/noticejs.css" />

2. Include Script

<script src="node_modules/notice.js/dist/notice.js"></script>
<!-- or -->
<script src="dist/notice.js"></script>

3. Basic Usage

new NoticeJs({
    text: 'Hello, World!',
    position: 'topRight',
}).show();

Examples

Basic Notification

new NoticeJs({
    text: 'Operation completed successfully!',
    position: 'topRight',
    type: 'success'
}).show();

With Timeout

The timeout option controls how long (in milliseconds) the notification stays visible. Set to false to disable auto-close.

// Auto-close after 5 seconds
new NoticeJs({
    text: 'This will disappear in 5 seconds',
    position: 'topRight',
    timeout: 5000  // 5 seconds
}).show();

// Disable auto-close
new NoticeJs({
    text: 'This stays until manually closed',
    position: 'topRight',
    timeout: false
}).show();

With Title

new NoticeJs({
    title: 'Success',
    text: 'Your changes have been saved!',
    position: 'topRight',
    type: 'success'
}).show();

With Animation

Notice.js supports CSS animations. Works great with Animate.css:

new NoticeJs({
    text: 'Notification with animation',
    position: 'topLeft',
    animation: {
        open: 'animated bounceInRight',
        close: 'animated bounceOutLeft'
    }
}).show();

With Progress Bar

new NoticeJs({
    text: 'Loading...',
    position: 'topRight',
    progressBar: true,
    timeout: 3000  // Progress bar shows countdown
}).show();

Different Types

// Success
new NoticeJs({
    text: 'Operation successful!',
    type: 'success',
    position: 'topRight'
}).show();

// Error
new NoticeJs({
    text: 'Something went wrong!',
    type: 'error',
    position: 'topRight'
}).show();

// Warning
new NoticeJs({
    text: 'Please check your input',
    type: 'warning',
    position: 'topRight'
}).show();

// Info
new NoticeJs({
    text: 'New update available',
    type: 'info',
    position: 'topRight'
}).show();

Callbacks

new NoticeJs({
    text: 'Notification with callbacks',
    position: 'topRight',
    callbacks: {
        onShow: function() {
            console.log('Notification shown!');
        },
        onClose: function() {
            console.log('Notification closed!');
        }
    }
}).show();

Configuration Options

| Option | Type | Default | Description | |-------|------|---------|-------------| | text | string | '' | Notification message text | | title | string | '' | Notification title (optional) | | type | string | 'success' | Notification type: success, error, warning, info | | position | string | 'topRight' | Position: topLeft, topRight, bottomLeft, bottomRight | | timeout | number/boolean | 30 | Auto-close timeout in milliseconds. Set to false to disable. | | progressBar | boolean | true | Show progress bar countdown | | closeWith | array | ['button'] | Ways to close: ['button'], ['click'], or both ['button', 'click'] | | animation | object/null | null | Animation classes: { open: 'class', close: 'class' } | | newestOnTop | boolean | false | Show newest notifications on top | | rtl | boolean | false | Right-to-Left language support |

Positions

• topLeft
• topRight
• bottomLeft
• bottomRight

Browser Support

Notice.js works in all modern browsers:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• IE11+ (with polyfills)

Contributing

Contributions are welcome! Please read our Contributing Guide first.

License

MIT License - see LICENSE file for details.

Testing & Examples

You can test notice.js locally by opening examples/demo.html in your browser:

# After building the project
npm run build

# Open examples/demo.html in your browser
open examples/demo.html  # macOS
# or just double-click examples/demo.html

The demo includes interactive examples of all features including:

• All notification types (success, error, warning, info)
• Different positions
• Timeout controls
• Progress bars
• Animations
• Callbacks
• And more!

Repository

• GitHub: https://github.com/alihesaridev/notice.js
• Issues: https://github.com/alihesaridev/notice.js/issues
• Demo: examples/demo.html