Implementing an @User Mention Input Component with Highlight and Deletion Handling in React

This article explains how to build a custom React @mention input component that highlights mentioned users, treats the whole @username as a single deletable unit, tracks cursor position for a floating selector, and returns both the plain text and the list of mentioned users to the parent component.

MentionsReactTypeScript

0 likes · 12 min read

Implementing an @User Mention Input Component with Highlight and Deletion Handling in React

Qingyun Technology Community

Feb 22, 2022 · Frontend Development

Build a Custom Draft.js Comment Box with Length Limit, Mentions, and Links

This tutorial introduces Draft.js core concepts—EditorState, Entity, SelectionState, and CompositeDecorator—and walks through building a custom comment box in React that enforces a 200‑character limit, highlights @mentions, and supports link insertion using immutable state updates.

CompositeDecoratorDraft.jsEditorState

0 likes · 10 min read

Build a Custom Draft.js Comment Box with Length Limit, Mentions, and Links