NotificationManager

Overview

NotificationManager is the toast notification system in Now.js Framework. It supports multiple types, animations, and positioning.

When to use:

• Need to notify users
• Need feedback after action success/failure
• Need toast messages
• Need non-blocking alerts

Why use it:

• ✅ Multiple types (success, error, warning, info, loading)
• ✅ Configurable position
• ✅ Auto-dismiss with progress bar
• ✅ Queue management
• ✅ Pause on hover
• ✅ RTL support
• ✅ Accessibility (ARIA)

Basic Usage

Quick Methods

// Success
NotificationManager.success('Saved successfully');

// Error
NotificationManager.error('An error occurred');

// Warning
NotificationManager.warning('Please check your data');

// Info
NotificationManager.info('You have a new message');

// Loading
const loadingId = NotificationManager.loading('Processing...');
// Dismiss later
NotificationManager.dismiss(loadingId);

With Options

NotificationManager.success('Saved successfully', {
  duration: 5000,          // Display duration (ms)
  dismissible: true,       // Can dismiss by click
  progressBar: true,       // Show progress bar
  position: 'top-right'    // Position
});

Notification Types

Configuration

NotificationManager.init({
  // Position: 'top-right', 'top-left', 'bottom-right', 'bottom-left'
  position: 'top-right',

  // Default duration (ms)
  duration: 3000,

  // Maximum visible notifications
  maxVisible: 5,

  // Enable animations
  animation: true,

  // Allow click to dismiss
  dismissible: true,

  // Show progress bar
  progressBar: false,

  // Pause timer on hover
  pauseOnHover: false,

  // Show close button
  closeButton: true,

  // Show type icons
  icons: true,

  // RTL support
  rtl: false,

  // ARIA attributes
  aria: true
});

API Reference

NotificationManager.success(message, options?)

Show success notification

Returns: string - Notification ID

NotificationManager.error(message, options?)

Show error notification

NotificationManager.warning(message, options?)

Show warning notification

NotificationManager.info(message, options?)

Show info notification

NotificationManager.loading(message, options?)

Show loading notification (must dismiss manually)

NotificationManager.show(options)

Show notification with custom options

Returns: string - Notification ID

NotificationManager.dismiss(id)

Dismiss notification

NotificationManager.clear()

Dismiss all notifications

NotificationManager.setPosition(position)

Change position

Events

// Listen via EventManager
EventManager.on('notification:shown', (data) => {
  console.log('Notification shown:', data.id);
});

EventManager.on('notification:dismissed', (data) => {
  console.log('Notification dismissed:', data.id);
});

CSS Styling

/* Container */
.notification-container {
  position: fixed;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notification-container.top-right {
  top: 16px;
  right: 16px;
}

.notification-container.bottom-left {
  bottom: 16px;
  left: 16px;
}

/* Notification */
.notification {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-radius: 8px;
  background: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  min-width: 300px;
  max-width: 400px;
}

.notification.success {
  border-left: 4px solid #10b981;
}

.notification.error {
  border-left: 4px solid #ef4444;
}

.notification.warning {
  border-left: 4px solid #f59e0b;
}

.notification.info {
  border-left: 4px solid #3b82f6;
}

/* Progress bar */
.notification-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: currentColor;
  transition: width linear;
}

/* Animation */
.notification.entering {
  animation: notification-in 0.3s ease-out;
}

.notification.leaving {
  animation: notification-out 0.3s ease-in;
}

@keyframes notification-in {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
}

@keyframes notification-out {
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

Real-World Examples

Form Submission Feedback

async function submitForm(formData) {
  const loadingId = NotificationManager.loading('Saving...');

  try {
    await ApiService.post('/api/save', formData);
    NotificationManager.dismiss(loadingId);
    NotificationManager.success('Data saved successfully');
  } catch (error) {
    NotificationManager.dismiss(loadingId);
    NotificationManager.error(error.message || 'An error occurred');
  }
}

API Response Integration

// In ResponseHandler
ApiService.onError((error) => {
  if (error.status === 401) {
    NotificationManager.warning('Please login again');
  } else if (error.status >= 500) {
    NotificationManager.error('Server error, please try again');
  } else {
    NotificationManager.error(error.message);
  }
});

Stacked Notifications

// Multiple notifications stack automatically
NotificationManager.info('Message 1');
NotificationManager.info('Message 2');
NotificationManager.info('Message 3');
// All 3 shown, oldest at top

Common Pitfalls

⚠️ 1. Loading Must Be Dismissed Manually

// ❌ Loading stays forever
NotificationManager.loading('Loading...');

// ✅ Remember ID and dismiss
const id = NotificationManager.loading('Loading...');
// ... do work ...
NotificationManager.dismiss(id);

⚠️ 2. Don't Show Too Many

// ❌ Show for each item
items.forEach(item => {
  NotificationManager.success(`Saved ${item.name}`);
});

// ✅ Show summary
await Promise.all(items.map(saveItem));
NotificationManager.success(`Saved ${items.length} items`);

Related Documentation

• ErrorManager - Error handling
• DialogManager - Dialogs