Instalación

FerNotify v2.0.0 no requiere ninguna dependencia externa. Solo incluye el script y listo.

CDN (recomendado para webs estáticas)

UMD — <script> global

El método más sencillo. Agrega el script a tu HTML y tendrás window.notify disponible globalmente.

<!-- Última versión -->
<script src="https://cdn.jsdelivr.net/gh/Fernandocabal/fernotify@latest/dist/notification-system.js"></script>

<!-- Versión específica (recomendado en producción) -->
<script src="https://cdn.jsdelivr.net/gh/Fernandocabal/fernotify@2.0.0/dist/notification-system.js"></script>

Uso:

// notify está disponible como variable global
notify.success('¡Hola!');
notify.toastInfo('Mensaje informativo');

ES Module — import

Para proyectos con módulos nativos o bundlers:

<script type="module">
  import NotificationSystem from 'https://cdn.jsdelivr.net/gh/Fernandocabal/fernotify@latest/dist/notification-system.esm.js';

  const notify = new NotificationSystem();
  notify.success('¡Funcionando con módulos!');
</script>

npm

npm install fernotify

JavaScript / TypeScript

import NotificationSystem from 'fernotify';

const notify = new NotificationSystem();
notify.success('¡Instalado!');

React + TypeScript

import { useEffect, useRef } from 'react';
import NotificationSystem from 'fernotify';

// Instancia singleton — créala fuera del componente
const notify = new NotificationSystem();

export default function App() {
  const handleSave = async () => {
    notify.toastLoading('Guardando...', 'Espera');
    try {
      await saveData();
      await notify.closeToastLoading();
      notify.toastSuccess('Guardado correctamente');
    } catch {
      await notify.closeToastLoading();
      notify.toastError('Error al guardar');
    }
  };

  return <button onClick={handleSave}>Guardar</button>;
}

Vite / Webpack

// Con bundler moderno
import NotificationSystem from 'fernotify/dist/notification-system.esm.js';

window.notify = new NotificationSystem();

Versiones disponibles

Archivo Formato Uso
dist/notification-system.js UMD (auto-ejecutable) <script src="...">
dist/notification-system.min.js UMD minificado Producción CDN
dist/notification-system.esm.js ES Module import / bundlers
dist/notification-system.esm.min.js ES Module minificado Producción ESM
Sin dependencias

A diferencia de v1.x, no necesitas incluir anime.js ni Boxicons. FerNotify v2 es completamente auto-contenido.