Introduction
A multi-trigger inline mentions component for React. Built on contenteditable with a framework-agnostic core.
What is @skyastrall/mentions?
A production-grade mentions input that supports @users, #tags, /commands, and custom triggers — each with its own data source, color, and configuration.
It ships as two packages:
@skyastrall/mentions-core— Framework-agnostic state machine, markup parser, trigger detection. Zero dependencies.@skyastrall/mentions-react— React adapter with a drop-in component, compound components, and a headless hook.
Three API Layers
Pick the level of control you need:
1. Drop-in Component
One import, one component, works out of the box with default styling.
<Mentions
triggers={[{ char: "@", data: users }]}
onChange={(markup, plainText) => {}}
/>2. Compound Components
Control the layout. The library handles state, ARIA, and keyboard navigation.
<Mentions triggers={triggers}>
<Mentions.Editor placeholder="Type @..." />
<Mentions.Portal>
<Mentions.List>
<Mentions.Item render={({ item }) => <UserCard user={item} />} />
</Mentions.List>
</Mentions.Portal>
</Mentions>3. Headless Hook
Full control. You get props, state, and helpers — render whatever you want.
const { inputProps, listProps, getItemProps, editorRef, isOpen, items } =
useMentions({ triggers });Key Features
- Multi-trigger support with per-trigger colors and data sources
- Contenteditable with DOM-first architecture
- Ghost text for AI inline completions (Tab to accept)
- Async data with debounce, abort, and loading states
- Single-line mode with Enter/paste/drop prevention
- WAI-ARIA combobox pattern with keyboard navigation
- Grammarly/extension defense
- Controlled and uncontrolled modes
- ~5KB core + ~7KB React adapter gzipped, zero runtime dependencies in core