@hasibulalam/notify-js

v2.0.1

Published

6 months ago

A lightweight, toastr.js compatible notification library with zero dependencies. Simple API: toastr('success', 'Message')

0High
0Medium
0Low

hasibulalam

toast notification toastr alert notify message popup lightweight no-jquery vanilla-js

Notify.js

A lightweight, toastr.js compatible notification library with zero dependencies. Works in all modern browsers and frameworks.

Features

🚀 Zero Dependencies - Works with any framework or vanilla JS
🎨 Customizable - Colors, positions, animations, and more
📱 Responsive - Works on all screen sizes
🎯 Multiple Notification Types - Success, Error, Warning, and Info
⚡ Lightweight - Only ~5KB minified + gzipped
🔄 Queue System - Handles multiple notifications gracefully
🎭 Smooth Animations - Beautiful enter/exit animations
🔧 Fully Configurable - Global and per-notification options

Installation

Via CDN

<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/@hasibulalam/notify-js/notify.min.css" rel="stylesheet">

<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/@hasibulalam/notify-js/notify.min.js"></script>

Via NPM

npm install @hasibulalam/notify-js
# or
yarn add @hasibulalam/notify-js

Basic Usage

// Show notifications
toastr.success('Operation completed!');
toastr.error('Something went wrong!');
toastr.warning('Please check your input');
toastr.info('New message received');

Framework Integration

Express.js

Install the required dependencies:

npm install express express-session

Set up the middleware:

// app.js
const session = require('express-session');
const { express } = require('@hasibulalam/notify-js/mvc');

app.use(session({ secret: 'your-secret-key' }));
app.use(express.middleware());

// In your routes
app.post('/submit', (req, res) => {
    req.flash('success', 'Data saved successfully!');
    res.redirect('/');
});

In your template (EJS example):

<% if (flash.success) { %>
    <script>
        toastr('success', '<%= flash.success %>');
    </script>
<% } %>

Laravel

Publish the assets:

php artisan vendor:publish --tag=notify-js

In your controller:

public function store()
{
    // Set flash message
    return redirect()->back()->with([
        'notify' => [
            'type' => 'success',
            'message' => 'Data saved successfully!'
        ]
    ]);
}

In your main layout (app.blade.php):

@if(session('notify'))
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            toastr('{{ session('notify.type') }}', '{{ session('notify.message') }}');
        });
    </script>
@endif

Django

Create a context processor:

# myapp/context_processors.py
def notify_processor(request):
    return {
        'notify_messages': messages.get_messages(request)
    }

Add to settings.py:

TEMPLATES = [
    {
        # ...
        'OPTIONS': {
            'context_processors': [
                # ...
                'myapp.context_processors.notify_processor',
            ],
        },
    },
]

In your template:

{% for message in notify_messages %}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            toastr('{{ message.tags }}', '{{ message|escapejs }}');
        });
    </script>
{% endfor %}

Ruby on Rails

Create a helper method in application_helper.rb:

module ApplicationHelper
  def notify_js_flash
    flash_messages = []
    flash.each do |type, message|
      type = 'success' if type == 'notice'
      type = 'error' if type == 'alert' || type == 'danger'
      flash_messages << "toastr.#{type}('#{j message}');" if message
    end
    
    javascript_tag flash_messages.join("\n") if flash_messages.any?
  end
end

In your layout (application.html.erb):

<%= notify_js_flash %>

In your controllers:

def create
  # ...
  redirect_to root_path, notice: 'Operation completed!'
  # or
  redirect_to root_path, alert: 'Something went wrong!'
end

Vanilla JavaScript / HTML

<!DOCTYPE html>
<html>
<head>
    <title>Notify.js Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/@hasibulalam/notify-js/notify.min.css" rel="stylesheet">
</head>
<body>
    <button onclick="toastr.success('Hello!')">Show Notification</button>
    <script src="https://cdn.jsdelivr.net/npm/@hasibulalam/notify-js/notify.min.js"></script>
</body>
</html>

React

import React from 'react';
import toastr from '@hasibulalam/notify-js';
import '@hasibulalam/notify-js/notify.min.css';

function App() {
    return (
        <button onClick={() => toastr.success('React Notification')}>
            Show Notification
        </button>
    );
}

export default App;

Vue.js

<template>
  <button @click="showNotification">Show Notification</button>
</template>

<script>
import toastr from '@hasibulalam/notify-js';
import '@hasibulalam/notify-js/notify.min.css';

export default {
  methods: {
    showNotification() {
      toastr.success('Vue Notification');
    }
  }
};
</script>

Angular

import { Component } from '@angular/core';
import * as toastr from '@hasibulalam/notify-js';
import '@hasibulalam/notify-js/notify.min.css';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="showNotification()">Show Notification</button>
  `
})
export class AppComponent {
  showNotification() {
    toastr.success('Angular Notification');
  }
}

Next.js

// pages/index.js
import { useEffect } from 'react';
import toastr from '@hasibulalam/notify-js';
import '@hasibulalam/notify-js/notify.min.css';

export default function Home() {
  useEffect(() => {
    // Client-side only
    toastr.success('Next.js Notification');
  }, []);

  return (
    <button onClick={() => toastr.success('Clicked!')}>
      Show Notification
    </button>
  );
}

Node.js (Express)

// server.js
const express = require('express');
const app = express();
const path = require('path');

app.use(express.static('public'));
app.use('/node_modules', express.static(path.join(__dirname, 'node_modules')));

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'public/index.html'));
});

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');});

Laravel (Blade)

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Notification</title>
    <link href="{{ asset('vendor/notify/notify.min.css') }}" rel="stylesheet">
</head>
<body>
    <button onclick="toastr.success('Laravel Notification')">Show Notification</button>
    
    <script src="{{ asset('vendor/notify/notify.min.js') }}"></script>
    
    @if(session('success'))
        <script>toastr.success('{{ session('success') }}');</script>
    @endif
</body>
</html>

Django

<!-- templates/index.html -->
{% load static %}
<!DOCTYPE html>
<html>
<head>
    <title>Django Notification</title>
    <link href="{% static 'notify/notify.min.css' %}" rel="stylesheet">
</head>
<body>
    <button onclick="toastr.success('Django Notification')">Show Notification</button>
    
    <script src="{% static 'notify/notify.min.js' %}"></script>
    
    {% if messages %}
        {% for message in messages %}
            <script>toastr.{{ message.tags }}('{{ message }}');</script>
        {% endfor %}
    {% endif %}
</body>
</html>

Ruby on Rails

<!-- app/views/layouts/application.html.erb -->
<!DOCTYPE html>
<html>
<head>
  <title>Rails App</title>
  <%= stylesheet_link_tag 'notify.min', media: 'all' %>
</head>
<body>
  <%= yield %>
  
  <%= javascript_include_tag 'notify.min' %>
  
  <% flash.each do |type, message| %>
    <script>
      toastr['<%= type %>']('<%= message %>');
    </script>
  <% end %>
</body>
</html>

PHP (Plain)

<!DOCTYPE html>
<html>
<head>
    <title>PHP Notification</title>
    <link href="notify.min.css" rel="stylesheet">
</head>
<body>
    <button onclick="toastr.success('PHP Notification')">Show Notification</button>
    
    <script src="notify.min.js"></script>
    
    <?php if (isset($_SESSION['success'])): ?>
        <script>toastr.success('<?php echo $_SESSION['success']; ?>');</script>
        <?php unset($_SESSION['success']); ?>
    <?php endif; ?>
</body>
</html>

Symfony

{# templates/base.html.twig #}
<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}Welcome!{% endblock %}</title>
    <link href="{{ asset('build/notify.min.css') }}" rel="stylesheet">
</head>
<body>
    {% block body %}{% endblock %}
    
    <script src="{{ asset('build/notify.min.js') }}"></script>
    
    {% for type, messages in app.flashes %}
        {% for message in messages %}
            <script>toastr['{{ type }}']('{{ message|e('js') }}');</script>
        {% endfor %}
    {% endfor %}
</body>
</html>

Configuration

Global Configuration

// Set default options
toastr.config({
    position: 'top-right', // or 'top-left', 'bottom-right', 'bottom-left'
    duration: 3000,        // in milliseconds (0 to disable auto-close)
    closeButton: true,     // show close button
    preventDuplicates: true, // prevent duplicate messages
    maxToasts: 5,          // maximum number of toasts to show at once
    spacing: 10,           // spacing between toasts in pixels
    
    // Custom icons
    icons: {
        success: '✓',
        error: '✕',
        warning: '!',
        info: 'i'
    },
    
    // Custom colors
    colors: {
        success: '#4CAF50',
        error: '#F44336',
        warning: '#FF9800',
        info: '#2196F3',
        text: '#FFFFFF',
        background: '#323232',
        close: '#FFFFFF'
    }
});

Per-Notification Options

// Customize individual notifications
toastr.success('Saved!', {
    duration: 5000,        // 5 seconds
    position: 'bottom-right',
    closeButton: true,
    // Override global colors for this notification
    colors: {
        success: '#2E7D32'
    }
});

API Reference

Methods

toastr.success(message, options) - Show success notification
toastr.error(message, options) - Show error notification
toastr.warning(message, options) - Show warning notification
toastr.info(message, options) - Show info notification
toastr.config(options) - Update global configuration
toastr.closeAll() - Close all active notifications

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | position | string | 'top-right' | Position of the notifications | | duration | number | 3000 | Time in milliseconds before auto-close (0 to disable) | | closeButton | boolean | true | Show close button | | preventDuplicates | boolean | true | Prevent duplicate messages | | maxToasts | number | 5 | Maximum number of toasts to show | | spacing | number | 10 | Spacing between toasts in pixels | | icons | object | - | Custom icons for each notification type | | colors | object | - | Custom colors for notifications |

Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)
iOS Safari (latest)
Android Chrome (latest)

License

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

A lightweight, framework-agnostic toast notification library with zero dependencies.

Features

🚀 Zero Dependencies - Works with any framework or vanilla JS
🎨 Customizable - Colors, positions, animations, and more
📱 Responsive - Works on all screen sizes
🎯 Multiple Notification Types - Success, Error, Warning, and Info
⚡ Lightweight - Only ~3KB minified + gzipped
🔄 Queue System - Handles multiple notifications gracefully
🎭 Smooth Animations - Beautiful enter/exit animations
💾 Flash Messages - Works with server-side frameworks and session storage
🔧 Fully Configurable - Global and per-notification options

Installation

Via CDN

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/yourusername/notify/notify.min.css">

<!-- JS -->
<script src="https://cdn.jsdelivr.net/gh/yourusername/notify/notify.min.js"></script>

Via NPM

npm install @yourusername/notify-js

import Notify from '@yourusername/notify-js';
import '@yourusername/notify-js/dist/notify.min.css';

Basic Usage

// Show a success notification
Notify.success('Operation completed successfully!');

// Show an error notification
Notify.error('Something went wrong!');

// Show a warning notification
Notify.warning('Please check your input!');

// Show an info notification
Notify.info('New message received');

Configuration

Global Configuration

Set default options for all notifications:

Notify.config({
    position: 'top-right', // top-right, top-left, bottom-right, bottom-left
    duration: 3000,        // in milliseconds (0 to disable auto-close)
    closeButton: true,     // show close button
    preventDuplicates: true, // prevent duplicate messages
    maxToasts: 5,          // maximum number of toasts to show at once
    spacing: 10,           // spacing between toasts in pixels
    
    // Custom icons
    icons: {
        success: '✓',
        error: '✕',
        warning: '!',
        info: 'i'
    },
    
    // Custom colors
    colors: {
        success: '#4CAF50',
        error: '#F44336',
        warning: '#FF9800',
        info: '#2196F3',
        text: '#FFFFFF',
        background: '#323232',
        close: '#FFFFFF'
    }
});

Per-Notification Configuration

Override global options for individual notifications:

// Custom duration
Notify.success('Saved!', { duration: 5000 });

// Different position
Notify.info('Bottom right', { position: 'bottom-right' });

// No auto-close
Notify.info('Important message', { duration: 0 });

// Custom colors
Notify.info('Custom Styled', {
    colors: {
        info: '#9b59b6',
        text: '#fff'
    }
});

API Reference

Methods

Notify.success(message, options) - Show a success notification
Notify.error(message, options) - Show an error notification
Notify.warning(message, options) - Show a warning notification
Notify.info(message, options) - Show an info notification
Notify.config(options) - Update global configuration
Notify.closeAll() - Close all active notifications

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | position | string | 'top-right' | Position of the notifications (top-right, top-left, bottom-right, bottom-left) | | duration | number | 3000 | Time in milliseconds before the notification auto-closes (0 to disable) | | closeButton | boolean | true | Show close button | | preventDuplicates | boolean | true | Prevent showing duplicate messages | | maxToasts | number | 5 | Maximum number of toasts to show at once | | spacing | number | 10 | Spacing between toasts in pixels | | icons | object | { success: '✓', error: '✕', warning: '!', info: 'i' } | Custom icons for each notification type | | colors | object | See below | Custom colors for notifications |

Color Options

| Option | Default | Description | |--------|---------|-------------| | success | '#4CAF50' | Success notification background color | | error | '#F44336' | Error notification background color | | warning | '#FF9800' | Warning notification background color | | info | '#2196F3' | Info notification background color | | text | '#FFFFFF' | Text color | | background | '#323232' | Default background color | | close | '#FFFFFF' | Close button color |

Browser Support

Notify.js works in all modern browsers, including:

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)
iOS Safari (latest)
Android Chrome (latest)

License

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Notify.js

Features

Installation

Via CDN

Via NPM

Basic Usage

Framework Integration

Express.js

Laravel

Django

Ruby on Rails

Vanilla JavaScript / HTML

React

Vue.js

Angular

Next.js

Node.js (Express)

Laravel (Blade)

Django

Ruby on Rails

PHP (Plain)

Symfony

Configuration

Global Configuration

Per-Notification Options

API Reference

Methods

Options

Browser Support

License

Contributing

Features

Installation

Via CDN

Via NPM

Basic Usage

Configuration

Global Configuration

Per-Notification Configuration

API Reference

Methods

Options

Color Options

Browser Support

License

Contributing