CometChatMentionsTextFormatter

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.

Attributes	Type	Description
`mentionTextFont`	string	Sets font for mentions
`mentionTextColor`	string	Sets color for mentions
`mentionTextBackground`	string	Sets background for mentions
`loggedInUserTextFont`	string	Sets font for loggedIn user mentions
`loggedInUserTextColor`	string	Sets color for loggedIn user mentions
`loggedInUserTextBackground`	string	Sets background for loggedIn user mentions

​Introduction

​Features

​Usage Guide

​Setup the Formatter

​Process Chat Messages