Quick Start

Get a working mentions input in under a minute.

Basic Usage

Import Mentions, define your data, render the component.

import { Mentions } from "@skyastrall/mentions-react";

const users = [
  { id: "1", label: "Alice Johnson" },
  { id: "2", label: "Bob Smith" },
  { id: "3", label: "Charlie Brown" },
];

function App() {
  return (
    <Mentions
      triggers={[{ char: "@", data: users }]}
      placeholder="Type @ to mention someone..."
      onChange={(markup, plainText) => {
        console.log("Markup:", markup);
        console.log("Plain:", plainText);
      }}
    />
  );
}

Type @ in the editor. A dropdown appears. Select a user — it becomes a highlighted mention.

Multiple Triggers

<Mentions
  triggers={[
    { char: "@", data: users, color: "oklch(0.75 0.15 250)" },
    { char: "#", data: tags, color: "oklch(0.75 0.12 300)" },
    { char: "/", data: commands, color: "oklch(0.80 0.12 80)" },
  ]}
  onChange={(markup, plainText) => {}}
/>

Understanding the Markup

The onChange callback receives two values:

• markup — Serialized string: @[Alice Johnson](1) hello #[urgent](t1)
• plainText — Display string: @Alice Johnson hello #urgent

Store the markup. Display the plain text. Parse mentions when needed:

import { extractMentions } from "@skyastrall/mentions-react";

const mentions = extractMentions(markup, triggers);
// [{ id: "1", label: "Alice Johnson" }, { id: "t1", label: "urgent" }]

Imperative Handle

import { useRef } from "react";
import { Mentions, type MentionsHandle } from "@skyastrall/mentions-react";

function Editor() {
  const ref = useRef<MentionsHandle>(null);

  return (
    <>
      <Mentions ref={ref} triggers={triggers} />
      <button onClick={() => ref.current?.focus()}>Focus</button>
      <button onClick={() => ref.current?.clear()}>Clear</button>
      <button onClick={() => ref.current?.insertTrigger("@")}>Insert @</button>
    </>
  );
}

Next

Compound Components for custom layouts, or API Reference for full details.