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.
Top comments (3)
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
Interesting topic, thank you very much!
where did you get the data of the user names?