React Mentions: @Personen und #Tags mit stabiler ID

React Mentions wirken einfach: @ tippen, einen Namen wählen, einen Chip anzeigen. Der Ärger kommt später. Jemand wird umbenannt, und alte Kommentare zeigen weiter den alten Namen oder benachrichtigen niemanden mehr. Zwei Personen namens Alex kommen sich in die Quere. Auf dem Smartphone öffnet sich die Vorschlagsliste unter der Tastatur, oder ein Tippen auf einen Namen schließt die Tastatur, und der Cursor ist weg. Dieser Guide zeigt, wie du @-Erwähnungen und #Tags so speicherst, dass sie Umbenennungen überstehen, wie du Vorschläge am Desktop und auf Touch-Geräten am Cursor platzierst, und welche Props im Mention Input von Wingo UI zählen.

Was muss eine Komponente für React Mentions können?

Fünf Dinge: ein stabiles Speicherformat, Vorschläge genau dort, wo du tippst, Chips, die sich als Einheit verhalten, ein Smartphone-Layout, das die Tastatur offen hält, und eine saubere Ausgabe für Screenreader.

1. Markup mit IDs. Der gespeicherte Wert enthält die ID jeder Erwähnung, damit sich der Text ändern kann und der Verweis trotzdem hält.
2. Vorschläge am Cursor. Die Liste öffnet sich neben dem @, das du gerade getippt hast, filtert beim Tippen und erlaubt Leerzeichen, sodass „Daniel Re“ noch passt.
3. Atomare Chips. Backspace direkt hinter einem Chip entfernt ihn ganz, die Pfeiltasten springen über ihn hinweg, und der Cursor landet nie mitten im Chip.
4. Smartphones. 16px Schriftgröße, damit iOS nicht zoomt, 44px hohe Zeilen und eine Liste, die über der Bildschirmtastatur sichtbar bleibt.
5. Barrierefreiheit. Das Feld sagt den markierten Vorschlag an und meldet, wenn eine Erwähnung hinzugefügt oder entfernt wurde.

Wie speichere ich Mentions, damit sie Umbenennungen überstehen?

Speichere Markup, das Label und ID zusammen enthält: @[Daniel Reed](u-daniel) für eine Person und #[follow-up](t-follow-up) für einen Tag. Die ID ist der Verweis. Das Label ist ein Schnappschuss des Namens zum Zeitpunkt des Schreibens und bleibt erhalten, damit sich der Text ohne Nachschlagen lesen lässt.

Die übliche Abkürzung ist, Klartext wie „@Daniel Reed“ zu speichern und die Namen beim Rendern abzugleichen. Das geht an dem Tag kaputt, an dem Daniel seinen Anzeigenamen ändert: Die alten Erwähnungen passen dann zu niemandem mehr, erscheinen als normaler Text, und deine Abfrage für Benachrichtigungen übersieht sie. Außerdem kann dieser Ansatz zwei Personen mit gleichem Namen nicht auseinanderhalten.

Der Mention Input von Wingo UI speichert genau dieses Markup. Seine Hilfsfunktionen arbeiten mit jedem gespeicherten Wert:

• getMentions(value) liefert jede Erwähnung als { trigger, id, label, start, end }, wobei start und end die Positionen im Klartext sind.
• mentionsToText(value) liefert, was Menschen lesen („Ruf morgen @Daniel Reed an“), für E-Mail-Texte, Vorschauen und Suchindizes.
• parseMentionMarkup(value) und serializeMentionSegments(segments) zerlegen das Markup in Text- und Mention-Segmente und setzen sie wieder zusammen, wobei alles maskiert wird, was nur wie Markup aussieht.

Wenn alte Notizen die aktuellen Namen zeigen sollen, schreib die Labels vor dem Rendern anhand der IDs neu:

"use client";

import { MentionText, parseMentionMarkup, serializeMentionSegments } from "@/components/ui/mention-input";

// ersetzt jedes @-Label durch den aktuellen Namen der Person; unbekannte IDs behalten ihr gespeichertes Label
function withCurrentNames(markup: string, names: Map<string, string>) {
  return serializeMentionSegments(
    parseMentionMarkup(markup).map((segment) =>
      segment.type === "mention" && segment.trigger === "@" && names.has(segment.id)
        ? { ...segment, label: names.get(segment.id)! }
        : segment,
    ),
  );
}

export function Note({ markup, names, currentUserId }: { markup: string; names: Map<string, string>; currentUserId: string }) {
  return <MentionText value={withCurrentNames(markup, names)} highlightIds={[currentUserId]} className="text-sm" />;
}

Die Erwähnung von jemandem, der das Unternehmen verlassen hat, behält das Label, mit dem sie geschrieben wurde. In einem Audit-Trail ist das meist genau richtig. MentionText rendert einen gespeicherten Wert schreibgeschützt mit denselben Chips, und highlightIds gibt deinen eigenen Erwähnungen den Brand-Ton, damit du sie in einem langen Verlauf schnell findest.

Wenn du vom Paket react-mentions umsteigst: Dessen Standard-Markup ist laut README (opens in a new tab) @[__display__](__id__), also dieselbe Form für den Trigger @. Gespeicherte Werte mit diesem Standard lassen sich unverändert parsen, es sei denn, ein Name oder eine ID enthält eine eckige Klammer, eine runde Klammer oder einen Backslash: Der Mention Input maskiert diese Zeichen mit \, react-mentions nicht. Werte mit einem eigenen markup-Template oder #-Erwähnungen, die in der @-Form gespeichert wurden, brauchen eine einmalige Migration.

Welche Props braucht eine React Mentions Textarea?

Zwei Listen und einen Wert. people richtet den Trigger @ ein, tags den Trigger #, und value mit onValueChange hält das Markup in deinem State. onValueChange bekommt außerdem { text, mentions }, du musst den Wert also nie zweimal parsen.

npx wingo-ui@latest add mention-input

"use client";

import { useState } from "react";
import { MentionInput, MentionText, type MentionItem } from "@/components/ui/mention-input";

const team: MentionItem[] = [
  { id: "u-emma", label: "Emma Carter", description: "Admin", keywords: ["emma.carter@northwind.app"] },
  { id: "u-daniel", label: "Daniel Reed", description: "Vertriebsleiter" },
  { id: "u-sophia", label: "Sophia Lee", description: "Buchhaltung" },
];

const tags: MentionItem[] = [
  { id: "t-follow-up", label: "nachfassen" },
  { id: "t-quote", label: "angebot" },
];

export function ClientNotes() {
  const [note, setNote] = useState("");
  const [saved, setSaved] = useState<string[]>([]);

  return (
    <div className="flex flex-col gap-3">
      <MentionInput
        label="Neue Notiz"
        value={note}
        onValueChange={setNote}
        people={team}
        tags={tags}
        placeholder="Schreib eine Notiz. @ für Teammitglieder, # für Tags"
        description="Erwähnte Teammitglieder bekommen eine Benachrichtigung."
        onSubmit={async (markup, { mentions }) => {
          const notify = [...new Set(mentions.filter((m) => m.trigger === "@").map((m) => m.id))];
          const response = await fetch("/api/notes", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ markup, notify }),
          });
          if (!response.ok) return;
          setSaved((prev) => [markup, ...prev]);
          setNote("");
        }}
      />
      {saved.map((markup, i) => (
        <MentionText key={i} value={markup} className="text-sm" />
      ))}
    </div>
  );
}

⌘ Enter (auf anderen Systemen Strg Enter) löst onSubmit aus, und ein zurückgegebenes Promise sperrt das Feld, bis es abgeschlossen ist. Eine langsame Anfrage kann so nicht doppelt abgeschickt werden. Prüf auf dem Server, ob jede ID in notify zu jemandem gehört, der den Datensatz sehen darf, bevor du irgendetwas verschickst. Die Hilfsfunktionen liegen in einer "use client"-Datei. Ruf sie also wie oben im Browser auf und schick die Ergebnisse zusammen mit dem Markup mit.

Die Props, die du als Nächstes anpassen wirst: multiline={false} für einen einzeiligen Aufgabentitel, minRows und maxRows für die mitwachsende Textarea, maxLength für einen Zähler, der einen Chip als seinen sichtbaren Text zählt, submitShortcut="enter" für ein Feld im Chat-Stil und name für ein verstecktes Input-Feld, das das Markup in einem normalen Formular mitschickt.

Tippe @ und ein paar Buchstaben, dann # und einen Tag, den es noch nicht gibt. Speichere die Notiz, dann erscheint sie darunter, gerendert mit MentionText.

Wie funktionieren #Tags und eigene Trigger?

Der Trigger # funktioniert wie @, mit einer Ergänzung: Wenn nichts exakt passt, bietet die letzte Zeile „Create #partnership“ an. Der neue Tag wird eingefügt und später wieder vorgeschlagen. Schalte das mit allowCreateTags={false} ab, oder gib einen triggers-Eintrag mit eigenem onCreate an, um den Tag zu speichern, bevor er eingefügt wird. Bestehende Tags werden automatisch vervollständigt und neue direkt im Text angelegt. Das separate Hashtag-Feld, das React-Apps oft neben ein Mention-Feld setzen, brauchst du also nicht.

Für alles andere definierst du einen Trigger. char ist ein einzelnes Symbol oder Satzzeichen, items eine statische Liste, und onSearch lädt Ergebnisse zur eingegebenen Suche, mit 200ms Debounce, und veraltete Antworten werden verworfen:

<MentionInput
  people={team}
  triggers={[
    {
      char: "$",
      title: "Dokumente",
      tone: "brand",
      onSearch: async (query) => {
        const response = await fetch(`/api/documents?q=${encodeURIComponent(query)}`);
        return (await response.json()) as MentionItem[];
      },
    },
  ]}
  placeholder="@ für Teammitglieder, $ für Dokumente"
/>

Ein triggers-Eintrag für @ oder # wird Feld für Feld mit people und tags zusammengeführt. { char: "@", tone: "info" } färbt also die Chips um und behält die Personenliste. Wenn du Tags als eigenes Feld mit Chips brauchst statt als Wörter in einem Satz, passt der Tag Input besser. Mehr dazu steht im Guide zum React Tag Input.

Worauf muss ein Mention Input in React am Smartphone reagieren?

Ein React Mention Input muss auf drei Dinge reagieren: die Tastatur, den Finger und den Zoom. Der Mention Input behält eine echte Textarea als Steuerelement und zeichnet die Chips in einer Highlighter-Ebene dahinter. So übernimmt der Browser weiterhin Autokorrektur, Diktieren und IME-Komposition. Bei einem Textfeld unter 16px zoomt iOS beim Fokus hinein, deshalb ist der Text am Smartphone 16px groß, egal welche size du setzt.

Mit der Maus öffnet sich die Liste am Cursor und wird per Portal über allem gerendert, damit keine Card und kein Dialog sie abschneidet. Auf Touch-Geräten hängt sie stattdessen am Rand des Felds, an einer festen Stelle, die nicht mit jeder neuen Zeile springt. Sie klappt nach oben, wenn die Tastatur den Platz darunter verdecken würde. Zeilen sind mindestens 44px hoch, und ein Tippen fügt den Eintrag ein, ohne dass das Feld den Fokus verliert. Die Tastatur bleibt offen, und der Cursor landet hinter dem Chip. Wenn du an anderer Stelle der Seite mit der Tastatur kämpfst, erklärt der Guide zur Tastatur in iOS Safari das Viewport-Verhalten dahinter.

suggestionsPlacement überschreibt die automatische Wahl mit "caret", "below" oder "above".

Wie mache ich React Mentions barrierefrei?

Wer einen Screenreader nutzt, sollte den Text so hören, wie andere ihn lesen, dazu den markierten Vorschlag und jede Änderung. Die Textarea behält ihre native Rolle textbox und verweist mit aria-haspopup, aria-controls und aria-activedescendant auf die Liste; die einzeilige Variante ist eine Combobox. Vorgelesen wird der Klartext („@Daniel Reed“), nie das Markup. Pfeil hoch und Pfeil runter bewegen die Markierung durch die Liste, Enter oder Tab fügt ein, Escape schließt erst die Liste und dann einen umgebenden Dialog, und eine Live-Region meldet „Daniel Reed mentioned“, „Daniel Reed removed“ oder „No matches“. Alle Texte stehen in labels, mit englischen Standardwerten in DEFAULT_MENTION_INPUT_LABELS. Die Tastaturbedienung der Liste selbst folgt denselben Regeln wie im Guide zur React Combobox.

Soll ich react-mentions, einen Rich-Text-Editor oder den Mention Input nehmen?

Das hängt davon ab, was der Text ist. Die Fakten unten stammen aus der öffentlichen Doku der Projekte und von npm, Stand Oktober 2026.

Wenn react-mentions für dich schon funktioniert, brauchst du vielleicht gar keine React Mentions Alternative. Wechsle, wenn du Styles auf Basis deiner Design-Tokens, Touch-Platzierung oder #-Zeilen zum Anlegen von Tags willst, ohne sie selbst zu bauen. Das @-Markup ist kompatibel, gespeicherte Werte kannst du also übernehmen. Nimm einen Rich-Text-Editor, wenn deine Nutzer Überschriften, Listen und Links brauchen. Der Rich Text Editor von Wingo UI baut auf Tiptap auf und schaltet @-Erwähnungen mit der Prop mentions={{ items }} ein. Ausgewählte Personen werden dabei zu Chips mit einer data-id im gespeicherten HTML.

Wann nehme ich stattdessen den Comment Thread?

Nimm ihn, wenn die Erwähnungen in einer Diskussion mit Antworten, Reaktionen, Bearbeiten und Löschen stehen. Der Comment Thread hat einen eigenen Composer mit @-Vorschlägen und gibt die erwähnten IDs als { mentions } an onSubmit weiter. Ein Unterschied ist wichtig: Seine Texte sind Klartext mit „@Name“, abgeglichen mit den people, die du übergibst. Die alten Erwähnungen einer umbenannten Person werden also wieder zu normalem Text. Für kurzlebige Threads ist das in Ordnung. Für Notizen, die du jahrelang aufbewahrst, speicherst du das Markup des Mention Input und renderst es mit MentionText.

Was sind die typischen Fallstricke bei React Mentions?

• Namen statt IDs speichern. Umbenennungen und doppelte Namen machen Benachrichtigungen kaputt. Speicher die ID.
• Nur im Client benachrichtigen. Schick die IDs und prüf dann auf dem Server, wer benachrichtigt werden darf.
• Gespeichertes Markup als HTML rendern. MentionText rendert Textknoten und Chips, nie HTML. Ein Label mit spitzen Klammern bleibt also Text.
• Eine Liste hinter dem nächsten Abschnitt. Auf Touch-Geräten wird die Liste im Fluss am Feld gerendert, damit sie mit dem Feld scrollt. Abschneidende Elternelemente wie eine Card mit overflow-hidden oder der Body eines Sheets werden berücksichtigt: Lassen sie zu wenig Platz, wird die Liste per Portal gerendert. Ein Elternelement, das nur isoliert (zum Beispiel mit isolate) und nicht abschneidet, braucht z-dropdown, sonst liegt die Liste unter dem, was danach kommt.

Wie füge ich ihn zu meinem Projekt hinzu?

Führ npx wingo-ui@latest add mention-input aus. Die CLI kopiert den Quellcode nach components/ui, ergänzt die Wingo-UI-Items, die der Mention Input importiert (Field, Listbox, Avatar, Spinner, vier Hooks und die gemeinsamen Hilfsfunktionen in lib), und installiert das Paket motion. Der Mention Input ist eine Pro-Komponente (Preise). Weitere Deep Dives zu einzelnen Komponenten findest du in der Kategorie Komponenten-Guides, und der Guide zu React-Formularkomponenten erklärt die Anatomie aus Label, Hinweis und Fehler, die dieses Feld mit jedem anderen Input teilt.

Häufige Fragen

Was ist die beste Alternative zu react-mentions?

Entscheide nach dem, was du speicherst. Für Klartext mit Mention-Chips passt eine Komponente auf Textarea-Basis wie react-mentions oder der Mention Input von Wingo UI; für formatierte Dokumente passt ein Rich-Text-Editor mit Mention-Erweiterung wie Tiptap besser. Prüf das Datum des letzten Releases und wie sich die Liste am Smartphone verhält, bevor du dich festlegst.

Wie speichere ich Mentions in der Datenbank?

Speichere den Markup-String mit einer ID für jede Erwähnung, zum Beispiel @Daniel Reed, und leg die erwähnten IDs zusätzlich in einer eigenen Spalte oder Tabelle ab, wenn du abfragen willst, wer erwähnt wurde. Speichere nie nur den Anzeigenamen, denn Namen ändern sich und zwei Personen können gleich heißen.

Wird react-mentions noch gepflegt?

Stand Oktober 2026 ist das neueste Release von react-mentions auf npm die Version 4.4.10 vom 30. Juni 2023. Die Peer-Range (react >=16.8.3) akzeptiert React 19, aber ohne Release seit 2023 solltest du einplanen, neue Probleme selbst zu beheben.

Wie füge ich #Hashtags zu einer React-Textarea hinzu?

Leg einen zweiten Trigger für # mit einer eigenen Liste von Tags an. Im Mention Input von Wingo UI erledigt das die Prop tags, und wenn nichts exakt passt, bietet die Liste „Create #tag“ an, damit man beim Tippen neue Tags anlegen kann.

Ist der Mention Input von Wingo UI kostenlos?

Nein. Mention Input, Comment Thread und Rich Text Editor sind Pro-Komponenten. Field, Listbox und Avatar, auf denen der Mention Input aufbaut, sind kostenlos.