Skip to main content
FieldValue
Package@cometchat/chat-uikit-react
Key classCometChatUrlsFormatter (extends CometChatTextFormatter)
Required setupCometChatUIKit.init(UIKitSettings) then CometChatUIKit.login("UID")
PurposeAuto-detects URLs in text messages and converts them to clickable links
Sample appGitHub
RelatedCustom Text Formatter | All Guides
CometChatUrlsFormatter extends CometChatTextFormatter to detect URLs in text messages and render them as clickable links.

​
Usage

Extend CometChatTextFormatter, set regex patterns for URL detection, and override onRegexMatch and registerEventListeners to handle formatting and click behavior. 
import { CometChatTextFormatter } from "path-to-cometchat-text-formatter";

export class CometChatUrlsFormatter extends CometChatTextFormatter {
  constructor(regexPatterns) {
    super();
    this.setRegexPatterns(regexPatterns);
  }

  onRegexMatch(inputText) {
    return this.formatUrls(inputText);
  }

  registerEventListeners(element, classList) {
    if (classList.contains("clickable-url")) {
      element.addEventListener("click", this.onUrlClick);
    }
    return element;
  }
}

// Example usage:
const urlFormatter = new CometChatUrlsFormatter([/(https?:\/\/[^\s]+)/g]);

const formattedMessage = urlFormatter.getFormattedText(
  "Visit https://www.cometchat.com for more info."
);
console.log(formattedMessage); // Outputs message with clickable link

​
Customization

Apply CSS to your link class: 
.clickable-url {
  color: #1a0dab;
  text-decoration: underline;
  cursor: pointer;
}

​
Handling clicks

Override onUrlClick to add tracking or custom navigation: 
onUrlClick(event) {
  const url = event.target.dataset.url;
  window.open(url, '_blank');
}

​
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.