URL Formatter

Detect and style plain URLs as clickable links with optional tracking logic in CometChat React UI Kit.

AI Agent Component Spec

Field	Value
Package	@cometchat/chat-uikit-react
Key class	CometChatUrlsFormatter (extends CometChatTextFormatter)
Required setup	CometChatUIKit.init(UIKitSettings) then CometChatUIKit.login("UID")
Purpose	Auto-detects URLs in text messages and converts them to clickable links
Sample app	GitHub
Related	Custom 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.

TypeScript

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

Styling links

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.