Instalación
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.