Package Exports
- react-mentions
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-mentions) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
A React component that let's you mention people in a textarea like you are used to on Facebook or Twitter.
Getting started
- 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.
Configuration
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) |