RojeruAlert2

Librería de alertas modernas y atractivas con efectos especiales, validación de formularios y temas personalizables.

Características

• 🎨 Diseño moderno con animaciones fluidas
• 🌈 Efectos especiales (confeti, partículas, destellos, etc.)
• 📱 Totalmente responsive y accesible
• 🎭 Múltiples temas (claro, oscuro, automático)
• 📝 Validación de formularios en tiempo real
• 🌍 Soporte multi-idioma (ES/EN por defecto)
• ⚡ Ligero y rápido (~15KB minificado)
• 🎯 Sin dependencias

Instalación

NPM

npm install rojeru-alert2

CDN

<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/rojeru-alert2/dist/rojeru-alert2.min.css">

<!-- JavaScript -->
<script src="https://unpkg.com/rojeru-alert2/dist/rojeru-alert2.min.js"></script>

Uso básico

// Importación (si usas módulos ES6)
import RojeruAlert2 from 'rojeru-alert2/src/rojeru-alert2';
// O usa global.RojeruAlert2 si cargas via CDN

// Alertas básicas
RojeruAlert2.showSuccess({
    title: '¡Operación exitosa!',
    html: 'Los cambios se han guardado correctamente.',
    timer: 3000
});

RojeruAlert2.showError({
    title: 'Error',
    html: 'Ocurrió un problema al procesar la solicitud.',
    showCancelButton: true
});

RojeruAlert2.showInput({
    title: 'Ingresa tu nombre',
    inputPlaceholder: 'Ej: Juan Pérez',
    inputValidator: (value) => {
        if (!value) return 'El nombre es obligatorio';
        if (value.length < 3) return 'Mínimo 3 caracteres';
        return null;
    }
}).then(result => {
    if (result.isConfirmed) {
        console.log('Nombre ingresado:', result.value);
    }
});

Ejemplos avanzados

Con efectos especiales

RojeruAlert2.showSuccess({
  title: '¡Celebración!',
  html: 'Tarea completada exitosamente',
  effects: {
    confetti: true,
    sparkles: true,
    glow: true
  },
  soundEffect: 'success',
  vibration: true
});

Toast notifications

RojeruAlert2.toast({
  title: 'Nuevo mensaje',
  html: 'Tienes un nuevo mensaje de Juan',
  icon: 'info',
  position: 'top-end',
  timer: 5000
});

Formulario con validación

RojeruAlert2.showForm({
  title: 'Registro',
  formFields: [
    {
      id: 'name',
      type: 'text',
      label: 'Nombre completo',
      placeholder: 'Ingresa tu nombre',
      required: true,
      validators: [
        RojeruAlert2.getValidator('required'),
        RojeruAlert2.getValidator('minLength', 3)
      ]
    },
    {
      id: 'email',
      type: 'email',
      label: 'Correo electrónico',
      placeholder: '[email protected]',
      required: true,
      validators: [RojeruAlert2.getValidator('email')]
    }
  ]
}).then(result => {
  if (result.isConfirmed) {
    console.log('Datos del formulario:', result.value);
  }
});

API Reference

Métodos estáticos principales

| Método | Descripción | |---------------------------------------|--------------------------------------| | RojeruAlert2.fire(options) | Muestra una alerta personalizada | | RojeruAlert2.showSuccess(options) | Alerta de éxito | | RojeruAlert2.showError(options) | Alerta de error | | RojeruAlert2.showWarning(options) | Alerta de advertencia | | RojeruAlert2.showInfo(options) | Alerta informativa | | RojeruAlert2.showQuestion(options) | Alerta con pregunta | | RojeruAlert2.showInput(options) | Alerta con campo de entrada | | RojeruAlert2.showForm(options) | Alerta con formulario | | RojeruAlert2.toast(options) | Notificación tipo toast | | RojeruAlert2.confirm(options) | Alerta de confirmación | | RojeruAlert2.showLoading(options) | Alerta de carga | | RojeruAlert2.celebration(options) | Alerta con efectos de celebración |

Opciones principales

| Opción | Tipo | Default | Descripción | |-----------------------|----------|----------------|--------------------------------------------------------------| | title | string | '' | Título de la alerta | | html | string | '' | Contenido HTML | | icon | string | null | Tipo de icono (success, error, warning, info, question) | | showConfirmButton | boolean | true | Mostrar botón de confirmar | | showCancelButton | boolean | false | Mostrar botón de cancelar | | confirmButtonText | string | 'Aceptar' | Texto del botón confirmar | | cancelButtonText | string | 'Cancelar' | Texto del botón cancelar | | timer | number | null | Tiempo en ms para cerrar automáticamente | | position | string | 'center' | Posición (center, top, top-start, top-end, bottom, etc.) | | toast | boolean | false | Modo toast notification | | effects | object | {} | Efectos especiales (confetti, fireworks, particles, etc.) | | animation | string | 'zoom' | Animación (zoom, slide, fade, flip, bounce) | | theme | string | 'auto' | Tema (auto, light, dark) |

Configuración global

// Cambiar valores por defecto
RojeruAlert2.setDefaults({
  confirmButtonText: 'OK',
  cancelButtonText: 'Cancelar',
  theme: 'dark',
  animation: 'slide'
});

// Cambiar idioma
RojeruAlert2.setLanguage('en', {
  confirmButtonText: 'OK',
  cancelButtonText: 'Cancel'
});

Desarrollo

# Clonar repositorio
git clone https://github.com/rojerusan/rojeru-alert2.git
cd rojeru-alert2

# Instalar dependencias
npm install

# Modo desarrollo
npm run dev

# Construir para producción
npm run build

# Ejecutar tests
npm test

Compatibilidad

• Chrome 60+
• Firefox 60+
• Safari 12+
• Edge 79+
• Opera 55+

Licencia

MIT © Rogelio Urieta Camacho