generic-form

Notifications

Sistema de notificaciones basado en notistack. Incluye el componente Notifications que debe envolver la app, y el hook NotificationProvider para disparar notificaciones desde cualquier componente.

Configuración

Incluye Notifications en tu main.tsx, junto con LanguageProvider:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { LanguageProvider, Notifications } from "generic-form";
import "./i18n";
import App from "./App";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <LanguageProvider>
      <Notifications>
        <App />
      </Notifications>
    </LanguageProvider>
  </StrictMode>,
);

NotificationProvider

Hook que retorna una función notify para disparar notificaciones desde cualquier componente.

import { NotificationProvider } from "generic-form";

const MyComponent = () => {
  const notify = NotificationProvider();

  const handleClick = () => {
    notify({
      type: "success",
      title: "Guardado correctamente",
      content: "Los datos fueron guardados.",
    });
  };

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

Tipos de notificación

TipoDescripción
successNotificación verde de éxito.
errorNotificación roja de error.
warningNotificación amarilla de advertencia.
infoNotificación azul informativa.

Interface CustomNotification

PropTipoRequeridoDescripción
titlestring✅Texto principal de la notificación.
type"success" / "error" / "warning" / "info"❌Tipo de alerta. Por defecto "info".
contentstring❌Texto secundario debajo del título.

Ejemplo completo

import { NotificationProvider } from "generic-form";

const FormActions = () => {
  const notify = NotificationProvider();

  const handleSave = async () => {
    try {
      await saveData();
      notify({
        type: "success",
        title: "Éxito",
        content: "Los datos fueron guardados correctamente.",
      });
    } catch (e) {
      notify({
        type: "error",
        title: "Error",
        content: "Ocurrió un error al guardar.",
      });
    }
  };

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

Notas

  • Notifications debe estar por encima de cualquier componente que use NotificationProvider.
  • Las notificaciones se apilan con un máximo configurable (por defecto 3 simultáneas).
  • Cada notificación incluye un botón de cierre.