I've implemented a user tag functionality while pressing @ and it's working fine.But i couldn't able to highlight the tagged user because i'm using input field..While using libraries like react-mentions and draft-js , I couldnt integrate them into the codebase because of some weird issues..Any idea of implementing the highlighting part in this code would be really helpful..Thanks..https://codesandbox.io/s/charming-pike-bzhzn?file=/src/AutoCompletedText.js
Kesaven
Posted on
How to implement user mentions in React chat app without react-mentions and drafts-js library?
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (1)
I was about to tell you how troublesome it could be and don't do that but I figured that would not be an answer you are hoping for. I am not sure how
react-mentionsis causing weird issues (if you share the issues we may be able to help) but if your want to build something simple which you can have full control, I took a look at the DOM elements in thereact-mentionsdemo page and recreated a minimal working example. (obviously not production ready)So the basic idea is to save the value state as an array of objects with different types (normal text/mention) instead of plain string. Then you would track the mention texts and place a styled element (e.g. a
divwith yellow background) behind them. But it can be a headache to sync the positions when handling long text (text longer than theinputelement ortextarea). Learn why in the first few minutes of this talk:So my suggestion is: try to debug the problem
react-mentionsis causing you. If not, consider if that is a necessary feature or an @ sign is enough like DEV does.Apps like Facebook, Twitter don't use
inputortextareato style highlight, instead, they usecontenteditablediv. So if you foresee that your app will need a rich text editor in the future, you can have a look at quilljs and slate. These libraries, including draftjs, all usecontenteditablediv instead of the native input element which can give you a more customizable input field. AFAIK, quilljs has the best mobile support.