​
Introduction

Bring your chat conversations to life with CometChatMentionsTextFormatter. This class allows you to transform user mentions into clickable elements, enriching the communication experience and making it easy for users to notice and interact with each other within the chat.

​
Features

  • Auto-detected Mentions: Automatically finds and highlights mentions in messages.
  • Clickable: Makes each mention a clickable entity, enabling further user interaction.
  • Customizable: Offers the flexibility to style mentions to fit the design of your chat UI.

​
Usage Guide

​
Setup the Formatter

To get started, import and initialize the mentions formatter: 
import { CometChatMentionsTextFormatter } from "path-to-your-file";

// Initialize the formatter
const mentionsFormatter = new CometChatMentionsTextFormatter();
mentionsFormatter.setCometChatUserGroupMembers(userList);

​
Process Chat Messages

When rendering messages in the UI, apply the formatter to process mentions: 
const unformattedMessage = "<@uid:aliceuid> just shared a photo!";
const formattedMessage = mentionsFormatter.getFormattedText(unformattedMessage); // Render the `formattedMessage` in your message component
The formattedMessage now contains HTML with styled mentions that can be directly inserted into your message component.

​
UserMentionStyle

Styling properties for CometChatMentionsTextFormatter component.
AttributesTypeDescription
mentionTextFontstringSets font for mentions
mentionTextColorstringSets color for mentions
mentionTextBackgroundstringSets background for mentions
loggedInUserTextFontstringSets font for loggedIn user mentions
loggedInUserTextColorstringSets color for loggedIn user mentions
loggedInUserTextBackgroundstringSets background for loggedIn user mentions