> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# URL Formatter

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

<Accordion title="AI Integration Quick Reference">
  | 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](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app)                                  |
  | Related        | [Custom Text Formatter](/ui-kit/react/custom-text-formatter-guide) \| [All Guides](/ui-kit/react/guide-overview) |
</Accordion>

`CometChatUrlsFormatter` extends [CometChatTextFormatter](/ui-kit/react/custom-text-formatter-guide) to detect URLs in text messages and render them as clickable links.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/-ESEkh1kVWNrvtT0/images/65487075-url_formatter_web_screens-4c6055da929b73c11d7d45b0112fd5fc.png?fit=max&auto=format&n=-ESEkh1kVWNrvtT0&q=85&s=4a6162ef39cbab8722532590d099f9ac" width="1282" height="802" data-path="images/65487075-url_formatter_web_screens-4c6055da929b73c11d7d45b0112fd5fc.png" />
</Frame>

***

## Usage

Extend `CometChatTextFormatter`, set regex patterns for URL detection, and override `onRegexMatch` and `registerEventListeners` to handle formatting and click behavior.

<Tabs>
  <Tab title="TypeScript">
    ```ts lines theme={null}
    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
    ```
  </Tab>
</Tabs>

***

## Customization

### Styling links

Apply CSS to your link class:

```css lines theme={null}
.clickable-url {
  color: #1a0dab;
  text-decoration: underline;
  cursor: pointer;
}
```

### Handling clicks

Override `onUrlClick` to add tracking or custom navigation:

```javascript lines theme={null}
onUrlClick(event) {
  const url = event.target.dataset.url;
  window.open(url, '_blank');
}
```

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Custom Text Formatter" href="/ui-kit/react/custom-text-formatter-guide">
    Build custom inline text patterns.
  </Card>

  <Card title="Message List" href="/ui-kit/react/message-list">
    Render real-time message threads.
  </Card>

  <Card title="All Guides" href="/ui-kit/react/guide-overview">
    Browse all feature and formatter guides.
  </Card>

  <Card title="Sample App" href="https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app">
    Full working sample application on GitHub.
  </Card>
</CardGroup>