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.