react-mentions

@mention people in a textarea

Showing:

Popularity

Downloads/wk

115K

GitHub Stars

1.5K

Maintenance

Last Commit

4mos ago

Contributors

52

Package

Dependencies

4

License

BSD-3-Clause

Type Definitions

Tree-Shakeable

Yes?

Reviews

Average Rating

4.7/53
Read All Reviews
jsgiant

Top Feedback

5Great Documentation
1Easy to Use
1Bleeding Edge
1Hard to Use
1Abandoned

Readme

React Mentions

CircleCI codecov npm package semantic-release

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, Kontentino, and you?

Getting started

Install the react-mentions package via npm:

npm install react-mentions --save

Or yarn:

yarn add react-mentions

The package exports two 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:

Prop nameTypeDefault valueDescription
valuestring''The value containing markup for mentions
onChangefunction (event, newValue, newPlainTextValue, mentions)empty functionA callback that is invoked when the user changes the value in the mentions input
singleLinebooleanfalseRenders a single line text input instead of a textarea, if set to true
onBlurfunction (event, clickedSuggestion)empty functionPasses true as second argument if the blur was caused by a mousedown on a suggestion
allowSpaceInQuerybooleanfalseKeep suggestions open even if the user separates keywords with spaces.
suggestionsPortalHostDOM ElementundefinedRender suggestions into the DOM in the supplied host element.
inputRefReact refundefinedAccepts a React ref to forward to the underlying input element
allowSuggestionsAboveCursorbooleanfalseRenders the SuggestionList above the cursor if there is not enough space below
a11ySuggestionsListLabelstring''This label would be exposed to screen readers when suggestion popup appears

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

Prop nameTypeDefault valueDescription
triggerregexp or string'@'Defines the char sequence upon which to trigger querying the data source
dataarray or function (search, callback)nullAn array of the mentionable data entries (objects with id & display keys, or a filtering function that returns an array based on a query parameter
renderSuggestionfunction (entry, search, highlightedDisplay, index, focused)nullAllows customizing how mention suggestions are rendered (optional)
markupstring'@[__display__](__id__)'A template string for the markup to use for mentions
displayTransformfunction (id, display)returns displayAccepts a function for customizing the string that is displayed for a mention
regexRegExpautomatically derived from markup patternAllows providing a custom regular expression for parsing your markup and extracting the placeholder interpolations (optional)
onAddfunction (id, display, startPos, endPos)empty functionCallback invoked when a suggestion has been added (optional)
appendSpaceOnAddbooleanfalseAppend a space when a suggestion has been added (optional)

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.

Testing

Due to react-mentions' internal cursor tracking it is not good enough to simulate the editing of the textarea value using ReactTestUtils.Simulate.change. We recommend using @testing-library/user-event for a realistic simulation of events as they would happen in the browser as the user interacts the textarea.

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

Rate & Review

Great Documentation5
Easy to Use1
Performant0
Highly Customizable0
Bleeding Edge1
Responsive Maintainers0
Poor Documentation0
Hard to Use1
Slow0
Buggy0
Abandoned1
Unwelcoming Community0
100
Anil ChowdaryHyderabad78 Ratings78 Reviews
Frontend dev | React | Typescript | Javascript | Tailwind CSS
October 13, 2020
Easy to Use
Great Documentation

Used this package along with the react-quill package where the user can mention others in a discussion. It is easy to include in the code and simple to use. Documentation is good enough to understand If you have any use case where there is a chance of collaboration. You may need this package to implement the mentions.


0
Viktor PolushkinRussia Federation6 Ratings1 Review
I love Monday! 😍
6 months ago
Hunmin Kim1 Rating0 Reviews
8 months ago
Great Documentation
Shikher Mishra5 Ratings0 Reviews
9 months ago
Great Documentation
huangmin10061 Rating0 Reviews
10 months ago
Hard to Use
Great Documentation
Bleeding Edge
Abandoned

Tutorials

No tutorials found
Add a tutorial