NotificationManager - Now.js Example

1. Basic Notification Types

Display different types of notifications with appropriate durations and icons.


              // Success - auto-dismiss in 3 seconds
              NotificationManager.success('Data saved successfully!');

              // Error - auto-dismiss in 8 seconds (more time to read)
              NotificationManager.error('An error occurred. Please try again');

              // Warning - auto-dismiss in 8 seconds
              NotificationManager.warning('You have unsaved changes');

              // Info - auto-dismiss in 3 seconds
              NotificationManager.info('You have 3 new messages');

2. Loading Notification

Show loading state during async operations and dismiss when complete.


              async function simulateLoading() {
              // Show loading
              const loadingId = NotificationManager.loading('Processing...');

              // Wait 3 seconds
              await new Promise(resolve => setTimeout(resolve, 3000));

              // Dismiss loading
              NotificationManager.dismiss(loadingId);

              // Show result
              NotificationManager.success('Processing complete!');
              }

3. Custom Duration & Progress Bar

Adjust duration based on message length and show progress bar for better UX.


              // Short message - short duration
              NotificationManager.success('Saved', { duration: 2000 });

              // Long message - long duration
              NotificationManager.success('5 files uploaded successfully', {
              duration: 10000
              });

              // With progress bar
              NotificationManager.success('Upload complete!', {
              duration: 5000,
              progressBar: true
              });

              // Permanent - must close manually
              NotificationManager.error('Critical error', { duration: 0 });

4. Smart Replacement

System automatically replaces notifications of the same type to prevent overflow.


              // Show multiple errors - will replace each other
              NotificationManager.error('Error 1');
              setTimeout(() => {
              NotificationManager.error('Error 2'); // Replaces Error 1
              }, 500);
              setTimeout(() => {
              NotificationManager.error('Error 3'); // Replaces Error 2
              }, 1000);

              // Result: Only see "Error 3"

5. Form Submission Example

Real-world example showing loading, success, and error states.


              document.getElementById('demoForm').addEventListener('submit', async (e) => {
              e.preventDefault();

              // Show loading
              const loadingId = NotificationManager.loading('Saving data...');

              try {
              // Simulate API call
              await new Promise(resolve => setTimeout(resolve, 2000));

              // Dismiss loading
              NotificationManager.dismiss(loadingId);

              // Show result
              const result = new FormData(e.target).get('result');
              if (result === 'success') {
              NotificationManager.success('Data saved successfully!');
              e.target.reset();
              } else {
              NotificationManager.error('Unable to save data');
              }
              } catch (error) {
              NotificationManager.dismiss(loadingId);
              NotificationManager.error('Error: ' + error.message);
              }
              });

6. File Upload Simulation

Simulate file upload with loading and progress bar.


              async function simulateUpload() {
              const files = document.getElementById('fileInput').files;

              if (files.length === 0) {
              NotificationManager.warning('Please select files first');
              return;
              }

              const loadingId = NotificationManager.loading(
              `Uploading ${files.length} file(s)...`,
              { progressBar: true }
              );

              // Simulate upload
              await new Promise(resolve => setTimeout(resolve, 3000));

              NotificationManager.dismiss(loadingId);
              NotificationManager.success(
              `${files.length} file(s) uploaded successfully!`
              );
              }

7. Position Control

Change notification position to any corner of the screen.


              // Change position globally
              await NotificationManager.init({
              position: 'top-left' // top-right, top-left, bottom-right, bottom-left
              });

              NotificationManager.success('Displayed at top-left');

8. Clear All Notifications

Dismiss all visible notifications at once.


              // Show multiple notifications
              NotificationManager.info('Message 1');
              NotificationManager.info('Message 2');
              NotificationManager.info('Message 3');

              // Clear all
              NotificationManager.clear();

9. Duration Guidelines

Recommended durations for each notification type based on UX best practices.

Type	Duration	Reason
Success	3000ms (3s)	Confirms successful action, no further action needed
Error	8000ms (8s)	Gives time to read and understand the problem
Warning	8000ms (8s)	Important information to be aware of
Info	3000ms (3s)	General info, not critical
Loading	0 (no auto-dismiss)	Shows working status