@mshafiqyajid/react-mention

npm install @mshafiqyajid/react-mention

import { MentionStyled } from "@mshafiqyajid/react-mention/styled";
import "@mshafiqyajid/react-mention/styles.css";

const users = [
  { id: "1", label: "Alice", description: "Product" },
  { id: "2", label: "Bob",   description: "Engineering" },
];

<MentionStyled
  label="Message"
  placeholder="Type @ to mention someone…"
  triggers={[{
    char: "@",
    loadSuggestions: (query) =>
      users.filter(u =>
        u.label.toLowerCase().startsWith(query.toLowerCase())
      ),
  }]}
/>

<MentionStyled
  triggers={[
    {
      char: "@",
      loadSuggestions: (q) =>
        users.filter(u => u.label.toLowerCase().startsWith(q.toLowerCase())),
      maxSuggestions: 8,
    },
    {
      char: "#",
      loadSuggestions: (q) =>
        tags.filter(t => t.label.toLowerCase().startsWith(q.toLowerCase())),
      maxSuggestions: 6,
    },
  ]}
/>

<MentionStyled
  triggers={[{
    char: "@",
    loadSuggestions: async (query) => {
      const res = await fetch(`/api/users?q=${query}`);
      const data = await res.json();
      return data.users; // MentionSuggestion[]
    },
    minChars: 1,
    maxSuggestions: 8,
  }]}
/>

// Headless — use isLoading to show a custom indicator
const { isLoading, suggestions, isOpen } = useMention({ triggers });

{isOpen && isLoading && <p>Loading…</p>}
{isOpen && !isLoading && suggestions.map((s) => <div key={s.id}>{s.label}</div>)}

<MentionStyled
  triggers={[{
    char: "@",
    loadSuggestions: (q) => users.filter(u => u.label.startsWith(q)),
    renderSuggestion: (suggestion, isActive) => (
      <span style={{ display: "flex", gap: "0.5rem", alignItems: "center" }}>
        <span
          style={{
            width: 32, height: 32, borderRadius: 6,
            background: isActive ? "#eef2ff" : "#f4f4f5",
            display: "flex", alignItems: "center", justifyContent: "center",
            fontWeight: 700, fontSize: "0.75rem",
          }}
        >
          {suggestion.label.slice(0, 2).toUpperCase()}
        </span>
        <span>
          <strong>{suggestion.label}</strong>
          {suggestion.description && <small style={{ display: "block" }}>{suggestion.description}</small>}
        </span>
      </span>
    ),
  }]}
/>

<MentionStyled
  onMentionAdd={(triggerChar, suggestion) => {
    console.log(`Mentioned ${triggerChar}${suggestion.label}`);
    // triggerChar → "@" | "#" | any trigger char
    // suggestion  → MentionSuggestion
  }}
  triggers={[{
    char: "@",
    loadSuggestions: (q) => users.filter(u => u.label.startsWith(q)),
  }]}
/>

import { useMention } from "@mshafiqyajid/react-mention";

const {
  textareaProps,
  dropdownProps,
  getItemProps,
  isOpen,
  suggestions,
  activeSuggestion,
  selectSuggestion,
  close,
} = useMention({
  triggers: [{
    char: "@",
    loadSuggestions: (q) => users.filter(u => u.label.includes(q)),
  }],
  onChange: (value) => console.log(value),
});

return (
  <div style={{ position: "relative" }}>
    <textarea {...textareaProps} />
    {isOpen && (
      <ul {...dropdownProps}>
        {suggestions.map((s, i) => (
          <li
            key={s.id}
            {...getItemProps(i)}
            onMouseDown={(e) => { e.preventDefault(); selectSuggestion(i); }}
            style={{ background: i === activeSuggestion ? "#eef2ff" : undefined }}
          >
            {s.label}
          </li>
        ))}
      </ul>
    )}
  </div>
);

:root {
  --rmen-font-size-sm:    0.8125rem;
  --rmen-font-size-md:    0.875rem;
  --rmen-font-size-lg:    1rem;
  --rmen-radius-sm:       6px;
  --rmen-radius-md:       8px;
  --rmen-radius-lg:       10px;
  --rmen-padding-x-sm:    10px;
  --rmen-padding-x-md:    12px;
  --rmen-padding-x-lg:    14px;
  --rmen-duration:        150ms;
  --rmen-ease:            cubic-bezier(0.4, 0, 0.2, 1);

  /* Colors */
  --rmen-bg:              #ffffff;
  --rmen-bg-readonly:     #f4f4f5;
  --rmen-fg:              #18181b;
  --rmen-placeholder:     #a1a1aa;
  --rmen-border:          #d4d4d8;
  --rmen-border-hover:    #a1a1aa;
  --rmen-border-focus:    #6366f1;
  --rmen-shadow-focus:    rgba(99, 102, 241, 0.18);
  --rmen-label-fg:        #374151;
  --rmen-hint-fg:         #6b7280;
  --rmen-error-fg:        #dc2626;
  --rmen-error-border:    #dc2626;
  --rmen-error-shadow:    rgba(220, 38, 38, 0.18);

  /* Dropdown */
  --rmen-dropdown-bg:     #ffffff;
  --rmen-dropdown-border: #e4e4e7;
  --rmen-dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
  --rmen-dropdown-radius: 10px;
  --rmen-item-hover-bg:   #f4f4f5;
  --rmen-item-active-bg:  #eef2ff;
  --rmen-item-active-fg:  #4338ca;
  --rmen-avatar-size:     1.75rem;
}