Add Message Reactions

AI Agent Component Spec

{
  "component": "CometChatReactions",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatReactions } from \"@cometchat/chat-uikit-react\";",
  "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
  "description": "Displays emoji reactions on messages with counts and allows users to add/remove reactions.",
  "cssRootClass": ".cometchat-reactions",
  "relatedComponents": {
    "CometChatReactionList": "Shows list of users who reacted with each emoji",
    "CometChatReactionInfo": "Shows detailed reaction information on hover"
  },
  "props": {
    "data": {
      "message": { "type": "CometChat.BaseMessage", "required": true },
      "alignment": { "type": "MessageBubbleAlignment", "default": "left" }
    },
    "callbacks": {
      "onReactionClick": "(reaction: ReactionCount, message: CometChat.BaseMessage) => void",
      "onReactionListClick": "(message: CometChat.BaseMessage) => void"
    }
  },
  "features": {
    "addReaction": "Click emoji to add reaction",
    "removeReaction": "Click own reaction to remove",
    "viewReactors": "See who reacted with each emoji"
  }
}

Overview

This guide shows you how to add emoji reactions to messages using CometChatReactions. Reactions let users quickly respond to messages with emojis, showing reaction counts and who reacted. Time estimate: 10 minutes
Difficulty: Beginner

Prerequisites

React.js setup complete
Messaging configured
Reactions extension enabled in CometChat Dashboard

Steps

Step 1: Enable Reactions Extension

Reactions are automatically integrated when enabled in the CometChat Dashboard:

Go to your CometChat Dashboard
Navigate to Extensions
Enable the “Reactions” extension

Once enabled, reactions appear automatically on messages in CometChatMessageList.

Step 2: Using Reactions in Message List

Reactions are built into the message list component:

import { CometChatMessageList } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import "@cometchat/chat-uikit-react/css-variables.css";

function ChatWithReactions({ user }: { user: CometChat.User }) {
  return (
    <CometChatMessageList
      user={user}
      // Reactions are enabled by default when extension is active
    />
  );
}

export default ChatWithReactions;

Step 3: Standalone Reactions Component

Use CometChatReactions directly for custom message bubbles:

import { CometChatReactions } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import "@cometchat/chat-uikit-react/css-variables.css";

function MessageWithReactions({ message }: { message: CometChat.BaseMessage }) {
  return (
    <div className="message-bubble">
      <p>{(message as CometChat.TextMessage).getText?.()}</p>
      <CometChatReactions
        message={message}
        onReactionClick={(reaction, msg) => {
          console.log(`Clicked ${reaction.getReaction()} on message ${msg.getId()}`);
        }}
      />
    </div>
  );
}

Step 4: Display Reaction Details

Show who reacted with CometChatReactionList:

import { useState } from "react";
import {
  CometChatReactions,
  CometChatReactionList,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import "@cometchat/chat-uikit-react/css-variables.css";

function MessageWithReactionDetails({ message }: { message: CometChat.BaseMessage }) {
  const [showReactors, setShowReactors] = useState(false);

  return (
    <div className="message-bubble">
      <p>{(message as CometChat.TextMessage).getText?.()}</p>
      
      <CometChatReactions
        message={message}
        onReactionListClick={() => setShowReactors(true)}
      />

      {showReactors && (
        <div className="reaction-modal">
          <CometChatReactionList
            message={message}
            onClose={() => setShowReactors(false)}
          />
        </div>
      )}
    </div>
  );
}

Complete Example

Full implementation with custom message list:

import { useState, useEffect } from "react";
import {
  CometChatMessageList,
  CometChatMessageComposer,
  CometChatReactionList,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import "@cometchat/chat-uikit-react/css-variables.css";

function ChatWithReactionDetails({ user }: { user: CometChat.User }) {
  const [selectedMessage, setSelectedMessage] = useState<CometChat.BaseMessage | null>(null);

  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100vh" }}>
      <CometChatMessageList
        user={user}
        onMessageLongPress={(message) => setSelectedMessage(message)}
      />
      
      <CometChatMessageComposer user={user} />

      {/* Reaction Details Modal */}
      {selectedMessage && (
        <div 
          className="modal-overlay"
          onClick={() => setSelectedMessage(null)}
        >
          <div 
            className="modal-content"
            onClick={(e) => e.stopPropagation()}
          >
            <CometChatReactionList
              message={selectedMessage}
              onClose={() => setSelectedMessage(null)}
            />
          </div>
        </div>
      )}
    </div>
  );
}

export default ChatWithReactionDetails;

Advanced Configuration

Add Reactions Programmatically

Use the SDK to add reactions:

import { CometChat } from "@cometchat/chat-sdk-javascript";

async function addReaction(messageId: number, emoji: string) {
  try {
    await CometChat.addReaction(messageId, emoji);
    console.log("Reaction added successfully");
  } catch (error) {
    console.error("Error adding reaction:", error);
  }
}

async function removeReaction(messageId: number, emoji: string) {
  try {
    await CometChat.removeReaction(messageId, emoji);
    console.log("Reaction removed successfully");
  } catch (error) {
    console.error("Error removing reaction:", error);
  }
}

Listen for Reaction Events

Handle real-time reaction updates:

import { useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function useReactionEvents() {
  useEffect(() => {
    const listenerId = "reaction-listener";

    CometChat.addMessageListener(
      listenerId,
      new CometChat.MessageListener({
        onMessageReactionAdded: (reactionEvent) => {
          console.log("Reaction added:", reactionEvent);
        },
        onMessageReactionRemoved: (reactionEvent) => {
          console.log("Reaction removed:", reactionEvent);
        },
      })
    );

    return () => CometChat.removeMessageListener(listenerId);
  }, []);
}

Custom Emoji Picker

Integrate a custom emoji picker:

import { useState } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function CustomReactionPicker({ message }: { message: CometChat.BaseMessage }) {
  const [showPicker, setShowPicker] = useState(false);
  const quickReactions = ["👍", "❤️", "😂", "😮", "😢", "🎉"];

  const handleReaction = async (emoji: string) => {
    await CometChat.addReaction(message.getId(), emoji);
    setShowPicker(false);
  };

  return (
    <div className="reaction-picker">
      <button onClick={() => setShowPicker(!showPicker)}>+</button>
      
      {showPicker && (
        <div className="emoji-grid">
          {quickReactions.map((emoji) => (
            <button key={emoji} onClick={() => handleReaction(emoji)}>
              {emoji}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

Styling

Customize reaction appearance:

.cometchat-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.cometchat-reactions__reaction {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 12px;
  background: #f0f0f0;
  cursor: pointer;
  transition: background 0.2s;
}

.cometchat-reactions__reaction:hover {
  background: #e0e0e0;
}

.cometchat-reactions__reaction--active {
  background: #e3f2fd;
  border: 1px solid #2196f3;
}

.cometchat-reactions__count {
  font-size: 12px;
  color: #666;
}

Common Issues

Ensure the Reactions extension is enabled in your CometChat Dashboard before using reaction features.

Issue	Solution
Reactions not showing	Enable Reactions extension in CometChat Dashboard
Can’t add reactions	Check user permissions and message ownership
Reactions not updating	Ensure message listeners are properly attached
Duplicate reactions	The SDK prevents duplicate reactions from the same user

Overview

Prerequisites

Steps

Step 1: Enable Reactions Extension

Step 2: Using Reactions in Message List

Step 3: Standalone Reactions Component

Step 4: Display Reaction Details

Complete Example

Add Reactions Programmatically

Listen for Reaction Events

Custom Emoji Picker

Styling

Common Issues

Next Steps

Message Templates

Extensions

Messaging

Message List

Message Composer

​Overview

​Prerequisites

​Steps

​Step 1: Enable Reactions Extension

​Step 2: Using Reactions in Message List

​Step 3: Standalone Reactions Component

​Step 4: Display Reaction Details

​Complete Example

​Add Reactions Programmatically

​Listen for Reaction Events

​Custom Emoji Picker

​Styling

​Common Issues

​Next Steps

Message Templates

Extensions

​Related Guides

Messaging

Message List

Message Composer

Overview

Prerequisites

Steps

Step 1: Enable Reactions Extension

Step 2: Using Reactions in Message List

Step 3: Standalone Reactions Component

Step 4: Display Reaction Details

Complete Example

Add Reactions Programmatically

Listen for Reaction Events

Custom Emoji Picker

Styling

Common Issues

Next Steps

Related Guides