React Mentions

A React component that let's you mention people in a textarea like you are used to on Facebook or Twitter.

Used in production at:

• Signavio
• State
• Snips
• Swat.io
• GotDone
• Volinspire
• Marvin
• Timely
• GuideFitter
• Evite
• Publer

Please let us know if you are using react-mentions, we'd love to add you to this list.

Getting started

Install the react-mentions package via npm:

npm install react-mentions --save

Require the react-mentions package, which exports the two relevant React components for rendering the mentions textarea:

import { MentionsInput, Mention } from 'react-mentions'

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: demo/src/examples

Configuration

The MentionsInput supports the following props for configuring the widget:

Each data source is configured using a Mention component, which has the following props:

If a function is passed as the data prop, that function will be called with the current search query as first, and a callback function as second argument. The callback can be used to provide results asynchronously, e.g., after fetch requests. (It can even be called multiple times to update the list of suggestions.)

Styling

react-mentions supports css, css modules, and inline styles. It is shipped with only some essential inline style definitions and without any css. Some example inline styles demonstrating how to customize the appearance of the MentionsInput can be found at demo/src/examples/defaultStyle.js.

If you want to use css, simply assign a className prop to MentionsInput. All DOM nodes rendered by the component will then receive class name attributes that are derived from the base class name you provided.

If you want to avoid global class names and use css modules instead, you can provide the automatically generated class names as classNames to the MentionsInput. See demo/src/examples/CssModules.js for an example of using react-mentions with css modules.

You can also assign className and style props to the Mention elements to define how to highlight the mentioned words.

Contributing

Spawn a development server with an example page and module hot loading all set up:

npm start

Update the examples page on Github Pages:

npm run pages-publish

@awkward/react-mentions versions

@awkward/react-mentions dependencies