Typing Indicator

Animated typing status display showing who is composing messages, with support for 1-on-1 and group chat contexts.

AI Integration Quick Reference

{
  "component": "CometChatTypingIndicator",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatTypingIndicator } from \"@cometchat/chat-uikit-react\";",
  "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
  "description": "Animated typing status display for 1-on-1 and group chat contexts with bouncing dots.",
  "cssRootClass": ".cometchat-typing-indicator",
  "primaryOutput": null,
  "props": {
    "data": {
      "typingNames": { "type": "string[]", "required": true, "note": "SDK-agnostic user display names" },
      "isGroupChat": { "type": "boolean", "default": "false" }
    },
    "callbacks": {}
  },
  "events": [],
  "sdkListeners": [],
  "types": {}
}

Where It Fits

CometChatTypingIndicator is a base display component used by CometChatMessageHeader (typing status below the conversation name) and CometChatConversations (typing status in conversation subtitle). It is SDK-agnostic — the parent maps CometChat.TypingIndicator objects to plain name strings before passing them in.

import { CometChatTypingIndicator } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

// In a message header component:
function MessageHeader({ typingIndicators, isGroup }) {
  const names = typingIndicators.map((t) => t.getSender().getName());

  return (
    <header>
      <h2>Conversation Title</h2>
      {names.length > 0 && (
        <CometChatTypingIndicator typingNames={names} isGroupChat={isGroup} />
      )}
    </header>
  );
}

---

Minimal Render

import { CometChatTypingIndicator } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function TypingDemo() {
  return <CometChatTypingIndicator typingNames={["Alice"]} />;
}

export default TypingDemo;

Root CSS class: .cometchat-typing-indicator

---

Display Logic

The component renders different text based on the chat context and number of typing users:

isGroupChat	Users typing	Display
false	1+	typing…
true	1	is typing…
true	2	and are typing…
true	3+	Multiple people are typing…
any	0	renders nothing

All cases include animated bouncing dots after the text.

---

Common Patterns

1-on-1 chat

import { CometChatTypingIndicator } from "@cometchat/chat-uikit-react";

function OneOnOneTyping() {
  return <CometChatTypingIndicator typingNames={["Alice"]} isGroupChat={false} />;
}

Group chat — single user

import { CometChatTypingIndicator } from "@cometchat/chat-uikit-react";

function GroupSingleTyping() {
  return <CometChatTypingIndicator typingNames={["Bob"]} isGroupChat />;
}

Group chat — multiple users

import { CometChatTypingIndicator } from "@cometchat/chat-uikit-react";

function GroupMultipleTyping() {
  return (
    <CometChatTypingIndicator
      typingNames={["Alice", "Bob", "Charlie"]}
      isGroupChat
    />
  );
}

---

CSS Architecture

The component uses CSS custom properties (design tokens) defined in @cometchat/chat-uikit-react/css-variables.css.

Key Selectors

Target	Selector
Root	.cometchat-typing-indicator
Content wrapper	.cometchat-typing-indicator__content
Text	.cometchat-typing-indicator__text
User name (bold)	.cometchat-typing-indicator__name
Dots container	.cometchat-typing-indicator__dots
Individual dot	.cometchat-typing-indicator__dot

Example: Custom dot color

.cometchat .cometchat-typing-indicator .cometchat-typing-indicator__dot {
  background-color: #6852d6;
}

.cometchat .cometchat-typing-indicator .cometchat-typing-indicator__text {
  color: #6852d6;
}

Customization Matrix

What to change	Where	Property/API	Example
Set typing users	Component props	typingNames	typingNames={['Alice']}
Set chat context	Component props	isGroupChat	isGroupChat={true}
Change text/dot colors	Global CSS	.cometchat-typing-indicator selectors	See example above

---

Props

---

typingNames

Display names of users currently typing. Empty array renders nothing.

Type	string[]
Required	Yes

The component is SDK-agnostic. The parent maps SDK TypingIndicator objects to name strings.

---

className

Custom CSS class applied to the root element.

Type	string
Default	undefined

---

isGroupChat

Whether this is a group conversation. Affects the display text format.

Type	boolean
Default	false

---

CSS Selectors

Target	Selector
Root	.cometchat-typing-indicator
Content wrapper	.cometchat-typing-indicator__content
Text	.cometchat-typing-indicator__text
User name	.cometchat-typing-indicator__name
Dots container	.cometchat-typing-indicator__dots
Individual dot	.cometchat-typing-indicator__dot
Dot animation	@keyframes cometchat-typing-indicator-bounce