Mentions Component

The main component. Renders a complete mentions editor with dropdown.

Import

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

Prop	Type	Default	Description
`triggers` *	`TriggerConfig[]`	—	Trigger configurations
`value`	`string`	—	Controlled markup value
`defaultValue`	`string`	`""`	Initial markup (uncontrolled)
`onChange`	`(markup, plainText) => void`	—	Fires on every content change
`onSelect`	`(item, trigger) => void`	—	Fires when a mention is inserted
`onRemove`	`(item, trigger) => void`	—	Fires when a mention is deleted
`onQueryChange`	`(query, trigger) => void`	—	Fires as the user types after a trigger
`onOpen`	`(trigger) => void`	—	Fires when the dropdown opens
`onClose`	`() => void`	—	Fires when the dropdown closes
`onError`	`(error: Error) => void`	—	Fires on async data fetch errors
`placeholder`	`string`	—	Editor placeholder text
`className`	`string`	—	CSS class for the editor div
`disabled`	`boolean`	`false`	Disables editing
`readOnly`	`boolean`	`false`	Makes the editor read-only
`autoFocus`	`boolean`	`false`	Focuses editor on mount
`singleLine`	`boolean`	`false`	Prevents newlines
`renderItem`	`(item, highlighted) => ReactNode`	—	Custom suggestion renderer
`ghostText`	`string`	—	Dimmed inline completion
`onAcceptGhostText`	`() => void`	—	Fires when Tab accepts ghost text
`ref`	`Ref<MentionsHandle>`	—	Imperative handle

Methods available via the ref prop.

Prop	Type	Default	Description
`focus`	`() => void`	—	Focuses the editor
`clear`	`() => void`	—	Clears all content
`getValue`	`() => { markup, plainText }`	—	Returns current values
`insertTrigger`	`(trigger: string) => void`	—	Inserts trigger and opens dropdown

Provide children to use compound components for custom layouts:

The contenteditable editor. Accepts placeholder, className, style, disabled, readOnly, autoFocus, singleLine.

Positions the dropdown at the caret. Renders inline by default. Pass container to portal elsewhere.

The suggestion list (<ul> with ARIA listbox attributes).

A suggestion item. Use render for custom rendering, or pass children.

<Mentions.Item render={({ item, highlighted }) => (
  <div style={{ fontWeight: highlighted ? 600 : 400 }}>
    {item.label}
  </div>
)} />

Shown when there are no matching suggestions.

Shown during async data fetching.