@skyastrall/mentions-react

Multi-trigger inline suggestions for React. Drop-in component, compound components, or headless hook.

Docs · Playground · GitHub

Install

npm install @skyastrall/mentions-react

Requires react >= 18.

Quick Start

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

<Mentions
  triggers={[
    { char: "@", data: users, color: "rgba(99,102,241,0.25)" },
    { char: "#", data: tags, color: "rgba(16,185,129,0.25)" },
    { char: "/", data: commands, color: "rgba(245,158,11,0.25)" },
  ]}
  onChange={(markup, plainText) => console.log(markup)}
/>

Features

• Multi-trigger (@mentions, #tags, /commands)
• Per-trigger highlight colors
• Ghost text / AI completions
• Async data with loading states
• Single-line mode
• Full ARIA keyboard navigation
• Controlled and uncontrolled modes
• ~5KB gzipped (~9KB core)

API Layers

1. <Mentions> — drop-in, works out of the box
2. Compound components — Mentions.Editor, Mentions.Portal, Mentions.List, Mentions.Item
3. useMentions() — headless hook, full control

See the full documentation for API reference and guides.

License

MIT — Built by SkyAstrall