react-mentions

🙌  brought to you by Signavio, docs and code on Github: https://github.com/signavio/react-mentions (BSD license)

Multiple trigger patterns

Mention people using '@' + username or type an email address

Hi John Doe, let's add joe@smoe.com and John Doe to this conversation...

Single line input

Single line input ignoring character accents

Scrollable container

The highlighter will mimic the scroll of the textarea thus making everything aligned.

Hi @johndoe, let's add @johndoe to this conversation...

Advanced options

Hi <-- johndoe -->!

Copy and paste mentions between mention components

This functionality is not supported in Internet Explorer.

Copy from here...
Hi John Doe, let's add joe@smoe.com and John Doe to this conversation...
...and paste over here...
...or paste plain text here

Copy and paste mentions between mention components from a disabled field

This functionality is not supported in Internet Explorer.

Copy from here...
Hi John Doe, let's add joe@smoe.com and John Doe to this conversation...
...and paste over here...
...or paste plain text here

Styling with css modules

Hi John Doe

Async Github user mentions

Emoji support

Suggestion portal example

Note that the suggestions menu is outside of the its parent element (in green) which is absolutely positioned and scrollable.

The input below is also scrollable.

Bottom guard example

Note that the bottom input will open the suggestions list above the cursor. Also, the middle one will render its suggestions always on top, even if it has enough space below.










Custom Suggestions Container

Custom input component