A React component that let's you mention people in a textarea like you are used to on Facebook or Twitter.
- Install the react-mentions package via NPM:
npm install react-mentions
- Require the react-mentions package, which exports the two relevant React components for rendering the mentions textarea:
var mentions = require("react-mentions");
var MentionsInput = ReactMentions.MentionsInput;
var Mention = ReactMentions.Mention;
MentionsInput is the main component rendering the textarea control. It takes one or multiple Mention components as its children. Each Mention component is a data source for a specific class of mentionable objects, such as users, template variables, issues, etc.
The MentionsInput supports the following props for configuring the widget:
| Prop name | Type | Default value | Description |
|---|---|---|---|
| markup | string | '@[__display__](__id__)' |
A template string for the markup to use for mentions when saving to the backend |
| singleLine | boolean | false |
Renders a single line text input instead of a textarea, if set to true |
| displayTransform | function | null |
Accepts a function for customizing the string that is displayed for a mention (optional) |
Each data source is configured using a Mention component, which has the following props:
| Prop name | Type | Default value | Description |
|---|---|---|---|
| trigger | regexp or string | '@' |
Defines the char sequence upon which to trigger querying the data source |
| type | string | null |
Identifier for the data source, when using multiple data sources (optional) |
| data | array | null |
An array of the mentionable data entries |
| renderSuggestion | function | null |
Allows customizing how mention suggestions are rendered (optional) |