JSPM – react-mentions@0.2.0

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

#React Mentions

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 = 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 start

To transpile the JSX sources, run the following command:

npm run transpile

To update the combined and minified browser build, use the "dist" script:

npm run dist