Mentions Formatter

Format @mentions in CometChat React UI Kit messages with custom styles, mention suggestions, group member mentions, and tap handling.

AI Integration Quick Reference

Field	Value
Package	@cometchat/chat-uikit-react
Key class	CometChatMentionsFormatter (extends CometChatTextFormatter)
Required setup	CometChatUIKit.init(UIKitSettings) then CometChatUIKit.login("UID")
Purpose	Format @mentions with styled tokens, suggestion list, and click handling for users and group members
Sample app	GitHub
Related	Custom Text Formatter | All Guides

CometChatMentionsFormatter extends CometChatTextFormatter to format @mentions in text messages. It styles mention tokens, generates suggestion lists as users type, and handles click events on rendered mentions.

Capability	Description
Mention formatting	Auto-formats <@uid:...> placeholders into styled tokens
Custom styles	Colors, fonts, and backgrounds for mention text
User and group mentions	Works with both individual users and group members
Suggestion list	Generates mention candidates from user input
Click handling	Listener interface for tap/click on rendered mentions

---

Usage

1. Initialize the formatter

import { CometChatMentionsFormatter } from "path-to-your-file";

const mentionsFormatter = new CometChatMentions();
mentionsFormatter.setCometChatUserGroupMembers(userList);

2. Format a message

Provide the raw message string containing mention placeholders, then apply the formatter:

const unformattedMessage = "<@uid:aliceuid> just shared a photo!";
const formattedMessage = mentionsFormatter.getFormattedText(unformattedMessage);
// Render formattedMessage in your message component

The output contains HTML with styled mentions ready for rendering.

3. Pass to components

Use the textFormatters prop on CometChatMessageList, CometChatMessageComposer, or CometChatConversations.

---

Next Steps

Custom Text Formatter

Build custom inline text patterns.

Message List

Render real-time message threads.

All Guides

Browse all feature and formatter guides.

Sample App

Full working sample application on GitHub.