🌓

Dark Mode Automático

Las notificaciones detectan automáticamente el tema activo en tu web y ajustan sus colores. Prueba cambiar el tema usando el botón de arriba y luego abre cualquier notificación.

🌞 Modo Claro

• Fondo blanco (#ffffff)
• Texto oscuro (#111827)
• Overlay suave

🌙 Modo Oscuro

• Fondo oscuro (#0f1724)
• Texto claro (#e6eef8)
• Overlay intenso

💡 Integración: Solo necesitas agregar/quitar la clase .dark al elemento <html>. Compatible con Tailwind CSS (darkMode: 'class') y frameworks personalizados.

⚡ Importar mediante CDN

📦 Script Clásico (UMD)

Compatible con cualquier proyecto HTML tradicional. ¡Solo necesitas un tag script! Todas las dependencias se cargan automáticamente.

<!-- FerNotify (todo se carga automáticamente) -->
<script src="https://cdn.jsdelivr.net/gh/Fernandocabal/fernotify@latest/dist/notification-system.js"></script>

<script>
  notify.success('¡Todo funcionando!');
</script>

📦 ES Module

Para proyectos modernos con import/export. Las dependencias se cargan automáticamente. También puedes definir
"buttons" (array JSON) para diálogos con varios botones desde el playground.

<script type="module">
  import NotificationSystem from 'https://cdn.jsdelivr.net/gh/Fernandocabal/fernotify@latest/dist/notification-system.esm.js';
  
  window.notify = new NotificationSystem();
  notify.success('¡Funciona con ES Modules!');
</script>

📦 NPM

Para proyectos Node.js con bundler (Webpack, Vite, etc.)

npm install fernotify

import NotificationSystem from 'fernotify';
const notify = new NotificationSystem();
notify.success('¡Instalado vía npm!');

✅ Dependencias Automáticas:

• anime.js 3.2.1 - Se carga automáticamente desde CDN
• Boxicons 2.1.4 - Se carga automáticamente desde CDN

💡 Versionado: Puedes usar @latest para la última versión o especificar una versión exacta como @1.2.1

⚛️ Uso con React / Frameworks

FerNotify opera completamente fuera del árbol de React — manipula document.body directamente. No hay conflicto con el Virtual DOM. Sin embargo, hay patrones recomendados según el entorno. Desde v1.2.11 incluye tipos TypeScript (types/index.d.ts).

✅ Caso más simple y recomendado. En React + Vite (solo cliente) no hay restricciones: importa, instancia y usa donde quieras.

1. Instalar

npm install fernotify

2. Crear instancia singleton en un módulo separado — src/lib/notify.ts

import NotificationSystem from 'fernotify';

// Una sola instancia para toda la app
const notify = new NotificationSystem();
export default notify;

3. Usar en cualquier componente

import notify from '@/lib/notify';

export function SaveButton() {
  const handleSave = async () => {
    notify.toastLoading('Guardando...', 'Espera');
    try {
      await fetch('/api/save', { method: 'POST', body: JSON.stringify(data) });
      await notify.closeToastLoading();
      notify.toastSuccess('Guardado correctamente');
    } catch {
      await notify.closeToastLoading();
      notify.toastError('Error al guardar');
    }
  };

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

💡 Útil si prefieres el patrón de hooks o necesitas testear componentes con mocks de notify.

src/hooks/useNotify.ts

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

// La instancia se crea una sola vez por componente y no se pierde entre renders
export function useNotify() {
  const ref = useRef<NotificationSystem | null>(null);
  if (!ref.current) ref.current = new NotificationSystem();
  return ref.current;
}

Uso en componente

import { useNotify } from '@/hooks/useNotify';

export function LoginForm() {
  const notify = useNotify();

  const handleSubmit = async (e) => {
    e.preventDefault();
    notify.toastLoading('Iniciando sesión...');
    try {
      await login(credentials);
      await notify.closeToastLoading();
      notify.toastSuccess('¡Bienvenido!');
    } catch {
      // replaceToastLoading: sin animación de salida, reemplazo directo
      notify.replaceToastLoading('Credenciales incorrectas', { type: 'error' });
    }
  };
}

⚠️ Nota: si varios componentes usan useNotify() se crean instancias separadas. Para una instancia única en toda la app, usa el patrón singleton de src/lib/notify.ts o el Context del siguiente tab.

⚠️ SSR: window y document no existen en el servidor. Importar FerNotify en el nivel de módulo fallará durante el render de servidor. Usa cualquiera de estos patrones:

Opción A — Import dinámico con next/dynamic (recomendado para páginas / layouts)

// src/lib/notify.ts
let notify: InstanceType<typeof import('fernotify').default> | null = null;

export async function getNotify() {
  if (typeof window === 'undefined') return null; // SSR: no-op
  if (!notify) {
    const { default: NotificationSystem } = await import('fernotify');
    notify = new NotificationSystem();
  }
  return notify;
}

Opción B — Guard de cliente en componentes

// Solo se ejecuta en el cliente
'use client'; // App Router

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

export function useNotify() {
  const ref = useRef<InstanceType<typeof NotificationSystem> | null>(null);

  useEffect(() => {
    // useEffect solo corre en el cliente, nunca en SSR
    import('fernotify').then(({ default: NS }) => {
      ref.current = new NS();
    });
  }, []);

  return ref;
}

Opción C — Componente marcado con 'use client' (App Router)

'use client';

import NotificationSystem from 'fernotify';
// ✅ Seguro: este archivo solo se procesa en el cliente
const notify = new NotificationSystem();
export default notify;

🏗️ Para apps grandes que quieren inyectar una instancia mockeable en tests o compartir la misma instancia por toda la app vía Context.

src/context/NotifyContext.tsx

import { createContext, useContext, useRef } from 'react';
import NotificationSystem from 'fernotify';

const NotifyContext = createContext<NotificationSystem | null>(null);

export function NotifyProvider({ children }: { children: React.ReactNode }) {
  const ref = useRef<NotificationSystem | null>(null);
  if (!ref.current) ref.current = new NotificationSystem();

  return (
    <NotifyContext.Provider value={ref.current}>
      {children}
    </NotifyContext.Provider>
  );
}

export function useNotify() {
  const ctx = useContext(NotifyContext);
  if (!ctx) throw new Error('useNotify debe usarse dentro de <NotifyProvider>');
  return ctx;
}

Envolver la app en main.tsx

import { NotifyProvider } from '@/context/NotifyContext';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <NotifyProvider>
    <App />
  </NotifyProvider>
);

💡 Ventaja: en tests puedes envolver con un NotifyProvider que provea un mock de la instancia, sin tocar la implementación.

🍞 Toast — Notificaciones no bloqueantes

🔔

Los toasts son notificaciones ligeras que aparecen en la esquina de la pantalla sin bloquear la interfaz. Se cierran automáticamente (duración configurable), se pueden cerrar con el botón ×, y se acumulan apilándose uno bajo otro.

Métodos abreviados

notify.toastSuccess('Guardado');
notify.toastError('Ocurrió un error');
notify.toastWarning('Revisa los datos');
notify.toastInfo('Nueva actualización');
notify.toastQuestion('¿Continuar?');

// Carga con spinner (no se puede cerrar manualmente)
notify.toastLoading('Enviando...', 'Espera');
notify.closeToastLoading(); // cierra el spinner

Opciones avanzadas

notify.toast('Mensaje', {
  type: 'success',
  title: 'Título opcional',
  duration: 6000,   // 0 = sin auto-cierre
  position: 'bottom-right',
  id: 'mi-toast',  // deduplicación
  closeable: false  // oculta el botón ×
});

🔄 Toast de carga: toastLoading(msg, title?) muestra un spinner no cerrable. Solo puede existir uno a la vez. Ciérralo con closeToastLoading() para mostrar el resultado de la operación.
🏷️ Deduplicación: asigna un id para que, si el toast ya está visible (ej. botón clicado repetidamente), se resetee su cuenta regresiva en lugar de crear un duplicado.

Posiciones disponibles: top-right top-left top-center bottom-right bottom-left

Ejemplos — Notificaciones

Demostraciones de modales de notificación con uno o varios botones.

Playground — Notificaciones

Tipo Título Mensaje Texto del botón Botones (JSON)

Define un array JSON con propiedades text, color y onClick.

Timer (ms) Mostrar botón cerrar (X)

Overlay Opacity Overlay Duration (ms) Box Duration (ms) Box Start Scale Icon Rotate (deg) Allow Outside Click Allow Escape Key

Ejemplos — Toast

Notificaciones no bloqueantes, apilables y con pausa al pasar el mouse.

Playground — Toast

Tipo Título Mensaje Duration (ms) — 0 = sin auto-cierre ID (deduplicación)

Si ya hay un toast con este ID, se resetea su contador.

Posición Mostrar barra de progreso Closeable (mostrar botón ×)

Sistema de Notificaciones modernas

Documentación — Sistema de Notificaciones