How to Use MessagePopupII for Cleaner User Alerts

MessagePopupII Tutorial: Customizable Popups in Minutes

MessagePopupII is a lightweight popup utility designed to let developers add clear, attractive notifications to their apps with minimal code. This tutorial walks through installation, basic usage, customization options, and practical tips to get polished popups up and running in minutes.

1. Install and initialize

• Add the library to your project (assume package manager support):
  • npm: npm install messagepopupii
  • yarn: yarn add messagepopupii
• Initialize in your app entry point:
  javascript

  import MessagePopupII from ‘messagepopupii’; const popup = new MessagePopupII({ container: document.body, // where popups render defaultDuration: 3000, // ms position: ‘top-right’ // ‘top-left’, ‘bottom-right’, etc.});

2. Show a basic popup

• Display a simple info message:
  javascript

  popup.show(‘Upload complete’);

• Options can be passed per-message:
  javascript

  popup.show(‘Saved successfully’, { type: ‘success’, duration: 2000 });

3. Message types and icons

• Common types: info, success, warning, error.
• Each type uses a semantic color and optional icon:
  javascript

  popup.show(‘Network lost’, { type: ‘warning’, icon: true });

4. Custom content and actions

• Use HTML or JSX content to include buttons or links:
  javascript

  popup.show( ‘Update available. Install’, { duration: 0 } // sticky until dismissed); document.getElementById(‘updateBtn’).addEventListener(‘click’, () => { // trigger update flow then close popup.closeAll();});

• Or provide a callback for actions:
  javascript

  popup.show(‘Undo sent message?’, { actionText: ‘Undo’, onAction: () => undoSend()});

5. Styling and themes

• Global theme override:
  javascript

  popup.setTheme({ borderRadius: ‘8px’, fontFamily: ‘Inter, system-ui, sans-serif’, successBackground: ‘#E6FFFA’});

• Per-message custom class:
  javascript

  popup.show(‘Custom look’, { className: ‘my-popup’ });

• Example CSS:
  css

  .my-popup { background: linear-gradient(90deg,#fff,#f7f7ff); box-shadow: 0 6px 18px rgba(0,0,0,0.08); }

6. Positioning and stacking

• Configure positions: top-left, top-right, top-center, bottom-right, bottom-left, bottom-center.
• Control stacking and max visible:
  javascript

  popup.updateConfig({ maxVisible: 3, position: ‘bottom-right’ });

7. Accessibility

• Ensure popups are announced to screen readers:
  javascript

  popup.show(‘Form saved’, { ariaLive: ‘polite’ });

• Use proper contrast and focus management for interactive popups.

8. Lifecycle and events

• Listen for events:
  javascript

  popup.on(‘open’, (msg) => console.log(‘opened’, msg));popup.on(‘close’, (msg) => console.log(‘closed’, msg));

• Programmatically close:
  javascript

  const>

import MessagePopupII from ‘messagepopupii’; const popup = new MessagePopupII({ position: ‘top-right’, defaultDuration: 3500 }); document.getElementById(‘saveBtn’).addEventListener(‘click’, async () => { popup.show(‘Saving…’, { type: ‘info’, duration: 0 }); try { await saveData(); popup.closeAll(); popup.show(‘Saved!’, { type: ‘success’ }); } catch { popup.closeAll(); popup.show(‘Failed to save’, { type: ‘error’, duration: 5000 }); }});