> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-audit-content-webhooks.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# CometChatMentionsTextFormatter

> CometChatMentionsTextFormatter — CometChat documentation.

## 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:

```javascript theme={null}
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:

```javascript theme={null}
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 |