DEV Community

Cover image for React Mentions – How to Add Mentions to React Component
Tuomo Kankaanpää
Tuomo Kankaanpää

Posted on

10 3

React Mentions – How to Add Mentions to React Component

Almost all modern React applications with chatting features have the mentions functionality built in. You type @-character and as you continue to type the person’s name you want to mention, you see a list of suggestions narrowing down and you can choose the right person.

This is a feature that has become a norm in all chat applications. Nowadays, if you create a chat application and deploy it to production, you should have mentions functionality built in it. If you don’t, I bet that sooner than later you will start to get messages like “Why don’t I see my friend’s name when I type @ and her name?” or something of that sorts. That is because in people’s minds, it is a feature that is required in a chat application. It is non negotiable.

But when I was trying to implement this kind of functionality to my own application for the first time, it was very hard to find any tutorials or guides on how one can actually implement it. Which was pretty surprising since it is so common functionality and feature.

I might just be bad at researching or there actually is very few tutorials about it. Nevertheless, since I now know how it can be done, I decided to create a video, where I teach step by step how you can use React, Draft.js and Draft.js plugins to create text input component that has a mentions functionality. I hope this video will save you some of the trouble I went through when I was figuring this out.

You can see the video here.


Originally published at codepulse.blog on April 25, 2020.

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (3)

Collapse
 
soorajs98 profile image
Sooraj S • Edited

thanks. i need extra feature. when click on button , mention specific user in editor. Any idea ??
it is same like facebook auto mention without click on mention suggestions . when click reply button in facebook comment , automatically mention that user on textarea

Collapse
 
s0xzwasd profile image
John Doe

Interesting topic, thank you very much!

Collapse
 
chautran73 profile image
Chau

where did you get the data of the user names?

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more