enoviq-react-toast-message

A comprehensive React toast message library providing various notification components including alerts, popups, confirmations, and toast messages with customizable styling and behavior.

Installation

npm install enoviq-react-toast-message

or

yarn add enoviq-react-toast-message

Features

• 🎯 Multiple Component Types: Alert popups, message popups, toast notifications, and confirmation dialogs
• 🎨 Customizable Styling: Support for different types (error, warning, success, info)
• 📍 Flexible Positioning: 6 position options (TopLeft, TopCenter, TopRight, BottomLeft, BottomCenter, BottomRight)
• 🔧 Easy Integration: Simple API with React hooks support
• 📱 Responsive Design: Works across different screen sizes
• ⚡ Lightweight: Minimal dependencies
• 🎭 Event Handling: Custom button click handlers and callbacks
• ⏱️ Auto-dismiss: Configurable duration with hover-to-pause functionality
• 🚀 Modern Toast System: Advanced toast manager with stacking and positioning

Components

Available Components

• ToastMessage - Modern toast notification with progress bar and positioning
• ToastContainer - Container component for managing multiple toasts
• toast - Toast manager utility for programmatic control
• EnvAlertPopupBox - Alert popup with customizable message and type
• EnvMsgPopUp - Message popup with title, subtitle, and message
• EnvToast - Legacy toast notification with auto-dismiss functionality
• EnvShowConfirm - Confirmation dialog with promise-based response

Usage

Modern Toast System (Recommended)

Basic Setup

First, add the ToastContainer to your app root:

import React from 'react';
import { ToastContainer, toast } from 'enoviq-react-toast-message';

function App() {
  return (
    <div className="App">
      {/* Your app content */}
      <button onClick={() => toast.success("Hello World!")}>
        Show Toast
      </button>
      
      {/* Add ToastContainer at the end */}
      <ToastContainer />
    </div>
  );
}

export default App;

Toast Manager API

import { toast } from 'enoviq-react-toast-message';

// Basic usage
toast.success("Operation completed successfully!");
toast.error("Something went wrong!");
toast.warning("Please check your input!");
toast.info("Here's some information");

// With position options
toast.success("Success message", { position: "TopCenter" });
toast.error("Error message", { position: "BottomLeft" });
toast.warning("Warning message", { position: "BottomRight" });

// With custom duration (milliseconds)
toast.info("This stays for 5 seconds", { duration: 5000 });
toast.warning("This stays until manually closed", { duration: 0 });

// Manual removal
const toastId = toast.info("Click to close");
// Later...
toast.remove(toastId);

// Clear all toasts
toast.clear();

Position Options

• "TopLeft" - Top left corner
• "TopCenter" - Top center
• "TopRight" - Top right corner (default)
• "BottomLeft" - Bottom left corner
• "BottomCenter" - Bottom center
• "BottomRight" - Bottom right corner

Complete Modern Example

import React from 'react';
import { ToastContainer, toast } from 'enoviq-react-toast-message';

function App() {
  const showAllToasts = () => {
    toast.success("Success! Operation completed.", { position: "TopRight" });
    toast.error("Error! Something went wrong.", { position: "TopLeft" });
    toast.warning("Warning! Check your input.", { position: "BottomCenter" });
    toast.info("Info! Here's some information.", { position: "BottomRight" });
  };

  const showPersistentToast = () => {
    toast.warning("This toast stays until you close it!", { 
      duration: 0, 
      position: "TopCenter" 
    });
  };

  const showTimedToast = () => {
    toast.info("This disappears in 10 seconds", { 
      duration: 10000,
      position: "BottomLeft" 
    });
  };

  return (
    <div className="App">
      <h1>Modern Toast System Demo</h1>
      
      <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
        <button onClick={showAllToasts}>Show All Types</button>
        <button onClick={() => toast.success("Success!", { position: "TopCenter" })}>
          Success Toast
        </button>
        <button onClick={() => toast.error("Error!", { position: "BottomLeft" })}>
          Error Toast
        </button>
        <button onClick={() => toast.warning("Warning!", { position: "BottomCenter" })}>
          Warning Toast
        </button>
        <button onClick={() => toast.info("Info!", { position: "TopLeft" })}>
          Info Toast
        </button>
        <button onClick={showPersistentToast}>Persistent Toast</button>
        <button onClick={showTimedToast}>10s Duration</button>
        <button onClick={() => toast.clear()}>Clear All</button>
      </div>

      <ToastContainer />
    </div>
  );
}

export default App;

EnvMsgPopUp

Display a message popup with title, subtitle, and message.

<EnvMsgPopUp
  title="Title"
  subtitle="Subtitle"
  message="Your message here"
  onBtnClick={handleClose}
/>

Props:

• title (string) - Main title of the popup
• subtitle (string) - Subtitle text
• message (string) - Main message content
• onBtnClick (function) - Callback function when button is clicked

EnvAlertPopupBox

Display an alert popup with different severity types.

<EnvAlertPopupBox msg="Alert message" type="error" onBtnClick={handleClose} />

Props:

• msg (string) - Alert message content
• type (string) - Alert type: "error", "warning", "success", "info"
• onBtnClick (function) - Callback function when button is clicked

EnvToast

Display a toast notification with auto-dismiss functionality.

<EnvToast msg="Toast message" type="warning" onBtnClick={handleClose} />

Props:

• msg (string) - Toast message content
• type (string) - Toast type: "error", "warning", "success", "info"
• onBtnClick (function) - Callback function when closed

EnvShowConfirm

Display a confirmation dialog and get user response.

const handleConfirm = async () => {
  const result = await EnvShowConfirm({
    message: "Are you sure you want to delete this item?",
  });

  if (result) {
    // User confirmed
    console.log("User confirmed the action");
  } else {
    // User cancelled
    console.log("User cancelled the action");
  }
};

Parameters:

• message (string) - Confirmation message to display

Returns:

• Promise that resolves to true if confirmed, false if cancelled

Type Options

All components support the following type options for different styling:

• "success" - Green color scheme for success messages
• "error" - Red color scheme for error messages
• "warning" - Orange/yellow color scheme for warnings
• "info" - Blue color scheme for informational messages

Advanced Usage

Managing Multiple Notifications

import { useState, useCallback } from "react";

function NotificationManager() {
  const [notifications, setNotifications] = useState([]);

  const addNotification = useCallback((component) => {
    const id = Date.now();
    setNotifications((prev) => [...prev, { id, component }]);
  }, []);

  const removeNotification = useCallback((id) => {
    setNotifications((prev) => prev.filter((n) => n.id !== id));
  }, []);

  const showSuccess = (message) => {
    addNotification(
      <EnvToast
        msg={message}
        type="success"
        onBtnClick={() => removeNotification(id)}
      />
    );
  };

  return (
    <div>
      <button onClick={() => showSuccess("Operation completed!")}>
        Show Success
      </button>

      <div className="notifications-container">
        {notifications.map(({ id, component }) => (
          <div key={id}>{component}</div>
        ))}
      </div>
    </div>
  );
}

Async/Await Pattern with Confirmations

const handleDeleteUser = async (userId) => {
  const confirmed = await EnvShowConfirm({
    message: `Are you sure you want to delete user ${userId}? This action cannot be undone.`,
  });

  if (confirmed) {
    try {
      await deleteUser(userId);
      // Show success toast
      setPopupMsg(
        <EnvToast
          msg="User deleted successfully"
          type="success"
          onBtnClick={() => setPopupMsg("")}
        />
      );
    } catch (error) {
      // Show error alert
      setPopupMsg(
        <EnvAlertPopupBox
          msg="Failed to delete user"
          type="error"
          onBtnClick={() => setPopupMsg("")}
        />
      );
    }
  }
};

🎨 Enoviq CSS Variables Guide

This stylesheet defines a centralized set of CSS variables (custom properties) for managing fonts, colors, toast/popup themes, and light/dark mode.
It ensures consistent design, easy theming, and maintainability across the app.

📂 Structure

The CSS variables are organized into these sections:

1. Font Faces & Variables
2. Base Colors & Tokens
3. Toast & Popup Variables
4. Theme Variants (Light/Dark)

1️⃣ Font Setup

We include multiple custom font weights and provide semantic variable aliases.

:root {
  --font-default: "EnoviqFontTypeBlack";
  --font-normal: "EnoviqFontTypeBlack";
  --font-medium: "EnoviqFontTypeMedium";
  --font-bold: "EnoviqFontTypeBold";
  --font-light: "EnoviqFontTypeLight";
  --font-black-bold: "EnoviqFontTypeBlack";

  --font-primary: "Montserrat";
  --font-secondary: "Poppins";
}

🔹 Usage Example

body {
  font-family: var(--font-medium), sans-serif;
}
h1 {
  font-family: var(--font-bold), sans-serif;
}

2️⃣ Base Colors & Tokens

Core color system with semantic roles:

:root {
  --primary: #3793ff;
  --onPrimary: #2b2b2b;
  --secondary: #61d4ff;
  --onSecondary: #ffffff;
  --background: #ffffff;
  --container: #f5f5f5;

  --bs-body-bg: #ffffff;
  --bs-body-color: #212529;
  --bs-primary: #3793ff;
  --bs-secondary: #61d4ff;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
}

🔹 Usage Example

.button-primary {
  background: var(--primary);
  color: var(--onPrimary);
}

3️⃣ Toast & Popup Variables

Toast notifications and popup dialogs share consistent tokenized styles.

✅ Toast Variables

:root {
  --enoviq-toast-success-color: #10b981;
  --enoviq-toast-error-color: #ef4444;
  --enoviq-toast-warning-color: #f59e0b;
  --enoviq-toast-info-color: #3b82f6;

  --enoviq-toast-background: #ffffff;
  --enoviq-toast-text-color: #374151;

  --enoviq-toast-border-radius: 8px;
  --enoviq-toast-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

  /* Gradient Progress Bars */
  --enoviq-toast-success-gradient: linear-gradient(to right, #10b981, #20c997);
  --enoviq-toast-error-gradient: linear-gradient(to right, #ef4444, #fd7e14);
  --enoviq-toast-warning-gradient: linear-gradient(to right, #f59e0b, #fd7e14);
  --enoviq-toast-info-gradient: linear-gradient(to right, #3b82f6, #6610f2);
}

✅ Popup Variables

:root {
  --enoviq-popup-success-gradient: linear-gradient(135deg, var(--enoviq-toast-success-color), #45a049);
  --enoviq-popup-error-gradient: linear-gradient(135deg, var(--enoviq-toast-error-color), #d32f2f);
  --enoviq-popup-warning-gradient: linear-gradient(135deg, var(--enoviq-toast-warning-color), #f57c00);
  --enoviq-popup-info-gradient: linear-gradient(135deg, var(--enoviq-toast-info-color), #1976d2);

  --enoviq-popup-close-color: #999;
  --enoviq-popup-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
}

🔹 Usage Example

.toast-success {
  background: var(--enoviq-toast-background);
  border-left: 5px solid var(--enoviq-toast-success-color);
}

.popupIcon.success {
  background: var(--enoviq-popup-success-gradient);
}

4️⃣ Theme Variants (Light & Dark)

We support both light and dark themes via data-bs-theme attribute.

🌞 Light Theme

:root[data-bs-theme="light"] {
  --bs-body-bg: #ffffff;
  --bs-body-color: #212529;
  --enoviq-toast-background: #ffffff;
  --enoviq-toast-text-color: #374151;
  --enoviq-toast-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

🌙 Dark Theme

:root[data-bs-theme="dark"] {
  --bs-body-bg: #121212;
  --bs-body-color: #e4e4e7;
  --enoviq-toast-background: #333333;
  --enoviq-toast-text-color: #f4f4f5;
  --enoviq-toast-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

🔹 Usage Example

<html data-bs-theme="dark"> <!-- Switch theme dynamically -->

🛠️ Extending

• Add new semantic tokens (e.g., --success-bg, --error-bg) to unify button, toast, and popup styling.
• Override per-component if needed, while keeping fallback to global variables.

✅ Summary

• Fonts: Centralized via custom faces & variables.
• Colors: Semantic tokens for primary, secondary, success, warning, error.
• Toasts & Popups: Reusable tokens with gradients, shadows, and borders.
• Themes: Automatic light/dark mode support via [data-bs-theme].

Best Practices

1. State Management: Use React state to manage which popup/toast is currently displayed
2. Event Handling: Always use event.preventDefault() in button handlers to prevent form submission
3. Async Operations: Use the confirmation component with async/await for better user experience
4. Type Consistency: Use appropriate types (error, warning, success, info) for semantic meaning
5. Cleanup: Always provide proper close handlers to prevent memory leaks