@sprintly/react-mentions v0.1.11
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-mentionsRequire the react-mentions package, which exports the two relevant React components for rendering the mentions textarea:
var mentions = require("react-mentions");
var MentionsInput = mentions.MentionsInput;
var Mention = mentions.Mention;MentionsInput is the main component rendering the textarea control. It takes one or multiple Mention components as its children. Each Mention component represents a data source for a specific class of mentionable objects, such as users, template variables, issues, etc.
Example:
<MentionsInput value={this.state.value} onChange={this.handleChange}>
<Mention trigger="@"
data={this.props.users}
renderSuggestion={this.renderUserSuggestion} />
<Mention trigger="#"
data={this.requestTag}
renderSuggestion={this.renderTagSuggestion} />
</MentionsInput>You can find more examples here: gh-pages/views/examples
Configuration
The MentionsInput supports the following props for configuring the widget:
| Prop name | Type | Default value | Description |
|---|---|---|---|
| value | string | '' | The value containing markup for mentions |
| onChange | function (event, newValue, newPlainTextValue, mentions) | empty function | A callback that is invoked when the user changes the value in the mentions input |
| markup | string | '@[__display__](__id__)' | A template string for the markup to use for mentions |
| singleLine | boolean | false | Renders a single line text input instead of a textarea, if set to true |
| displayTransform | function (id, display, type) | returns display | 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 or function | null | An array of the mentionable data entries, or a filtering function that returns an array based on a query parameter |
| renderSuggestion | function | null | Allows customizing how mention suggestions are rendered (optional) |
| onAdd | function (id, display) | empty function | Callback invoked when a suggestion has been added (optional) |
Contributing
Only modify the JSX sources in the /src directory, the contents of the /lib directory will be overwritten during the build process. Spawn a development server with an example page and module hot loading all set up:
npm run startTo transpile the JSX sources, run the following command:
npm run transpileTo update the combined and minified browser build, use the "dist" script:
npm run dist