Mentions Formatter - CometChat Docs

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.

Custom Text Formatter

URL Formatter

​Usage

​1. Initialize the formatter

​2. Format a message

​3. Pass to components

​Next Steps

Custom Text Formatter

Message List

All Guides

Sample App

Usage

1. Initialize the formatter

2. Format a message

3. Pass to components

Next Steps