ToastHost

const ToastHost: React.FC

Rendert den Toaster für die Widget-Meldungen. Jedes Widget, das Toasts auslöst, mountet ihn selbst — es genügt also, das Widget allein in eine App zu setzen. Mehrfaches Mounten ist unschädlich (nur der erste Host rendert), die Host-App kann ihn also auch selbst einmal an die Wurzel hängen.

Vorschau

Die Buttons lösen echte Toasts über widgetToast aus; gerendert werden sie vom <ToastHost /> daneben. Die Meldung erscheint oben am Fensterrand (position="top-center").

Vorschau

Code

import { ToastHost, widgetToast } from '@gentics/cockpit/widgets';

// Jedes Widget, das Toasts auslöst, mountet den Host selbst. Ein zusätzliches
// Mounten an der Wurzel der Host-App ist erlaubt und unschädlich:
<ToastHost />

widgetToast.success('Gespeichert');

// Lade-Toast später durch das Ergebnis ersetzen:
const id = widgetToast.loading('Speichere…');
widgetToast.error('Fehlgeschlagen', { id });

Im Sachbearbeiter-Cockpit verwenden

Löst deine App selbst Meldungen aus, hängst du den Host einmal an die Wurzel und nutzt widgetToast — Beispiel unter Erste App bauen.

Die zwei Fälle, die dabei auffallen:

Symptom	Ursache
Meldung erscheint nicht	toast.* aus react-hot-toast schreibt in den Standard-Kanal, den die Widgets nicht rendern. widgetToast.* nehmen — oder bei toast.custom/toast.promise die WIDGET_TOAST_OPTIONS mitgeben
Meldung erscheint doppelt	Nicht durch mehrere <ToastHost /> (siehe oben), sondern weil dieselbe Meldung zweimal ausgelöst wird — etwa in einem Effekt ohne Abhängigkeiten — oder weil die Host-App einen eigenen <Toaster/> mit derselben toasterId mountet

widgetToast

const widgetToast: object

Toast-API der Widgets — Aufruf wie toast.*, nur dass die Meldung automatisch im Widget-Kanal landet.

In Widgets immer diese Variante nutzen. Ein direkter toast.*-Aufruf geht in den Default-Kanal und erscheint damit im <Toaster/> der Host-App — oder nirgends, wenn die keinen mountet.

widgetToast.success("Gespeichert");
const id = widgetToast.loading("Speichere...");
widgetToast.error("Fehlgeschlagen", { id });   // ersetzt den Lade-Toast

Type Declaration

error

error: (message, options?) => string

Fehlermeldung (rotes Symbol), schließt sich selbst.

Parameters

message

Message

Text oder JSX der Meldung.

options?

Partial<Pick<Toast, "className" | "style" | "id" | "icon" | "duration" | "ariaProps" | "position" | "iconTheme" | "toasterId" | "removeDelay">>

Wie bei widgetToast.success.

Returns

string

Die Toast-Id.

loading

loading: (message, options?) => string

Lade-Toast mit Spinner. Bleibt stehen, bis du ihn mit derselben Id durch eine Erfolgs- oder Fehlermeldung ersetzt.

Parameters

message

Message

Text oder JSX der Meldung.

options?

Partial<Pick<Toast, "className" | "style" | "id" | "icon" | "duration" | "ariaProps" | "position" | "iconTheme" | "toasterId" | "removeDelay">>

Wie bei widgetToast.success.

Returns

string

Die Toast-Id — die brauchst du zum Ersetzen.

success

success: (message, options?) => string

Erfolgsmeldung (grünes Häkchen), schließt sich selbst.

Parameters

message

Message

Text oder JSX der Meldung.

options?

Partial<Pick<Toast, "className" | "style" | "id" | "icon" | "duration" | "ariaProps" | "position" | "iconTheme" | "toasterId" | "removeDelay">>

Optionen von react-hot-toast, z. B. { id } zum Ersetzen eines Lade-Toasts oder { style }. Der Kanal wird immer überschrieben.

Returns

string

Die Toast-Id — als { id } weitergeben, um die Meldung später zu ersetzen.