Reactions

Displays emoji reaction chips on message bubbles with hover tooltips, a full reactor list, and overflow handling.

AI Integration Quick Reference

{
  "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 reaction chips on message bubbles with hover tooltips, a full reactor list, and overflow handling.",
  "cssRootClass": ".cometchat-reactions",
  "primaryOutput": {
    "prop": "onReactionClick",
    "type": "(emoji: string, message: CometChat.BaseMessage) => void"
  },
  "props": {
    "data": {
      "message": { "type": "CometChat.BaseMessage", "note": "Required. The message to show reactions for." },
      "alignment": { "type": "'left' | 'right' | 'center'", "default": "'left'" },
      "reactionsRequestBuilder": { "type": "CometChat.ReactionsRequestBuilder" }
    },
    "callbacks": {
      "onReactionClick": { "type": "(emoji: string, message: CometChat.BaseMessage) => void" },
      "onReactorClick": { "type": "(reaction: CometChat.Reaction, message: CometChat.BaseMessage) => void" },
      "onError": { "type": "(error: unknown) => void" }
    }
  },
  "types": {
    "CometChatReactionsRootProps": "Root provider props",
    "CometChatReactionsBarProps": "Reaction chips bar props",
    "CometChatReactionsChipProps": "Single reaction chip props",
    "CometChatReactionsInfoProps": "Hover tooltip props",
    "CometChatReactionsListProps": "Full reactor list props",
    "CometChatReactionsOverflowProps": "Overflow button props"
  }
}

Where It Fits

CometChatReactions renders below message bubbles to show emoji reactions. It is typically used inside CometChatMessageBubble as the footer view. The parent (usually CometChatMessageList) owns the reaction add/remove SDK calls and passes the updated message down.

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

function MessageBubbleFooter({ message, onReactionClick }) {
  return (
    <CometChatReactions.Root
      message={message}
      alignment="right"
      onReactionClick={onReactionClick}
    />
  );
}

Minimal Render

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

function Demo({ message }) {
  return <CometChatReactions.Root message={message} />;
}

Root CSS class: .cometchat-reactions

Sub-Components

CometChatReactions is a compound component with these sub-components:

Sub-Component	Purpose
Root	Context provider. Receives message and config.
Bar	Reaction chips container with role="group". Auto-calculates overflow via ResizeObserver.
Chip	Single reaction button with emoji, count, and aria-pressed.
Info	Hover tooltip showing who reacted with a specific emoji.
List	Full reactor list popover with tab filtering and pagination.
Overflow	”+N more” button for overflow reactions.

Custom Layout

Compose sub-components to customize the layout:

<CometChatReactions.Root message={message}>
  <CometChatReactions.Bar maxVisible={5} />
</CometChatReactions.Root>

Standalone List

Use the List sub-component independently:

<CometChatReactions.Root message={message}>
  <CometChatReactions.List />
</CometChatReactions.Root>

Actions and Events

Callback Props

onReactionClick

Called when a reaction chip is clicked. The parent (MessageList) handles the SDK call for adding/removing the reaction.

<CometChatReactions.Root
  message={message}
  onReactionClick={(emoji, msg) => {
    console.log(`Toggled ${emoji} on message ${msg.getId()}`);
  }}
/>

onReactorClick

Called when a user in the reaction list is clicked. Useful for removing own reactions.

<CometChatReactions.Root
  message={message}
  onReactorClick={(reaction, msg) => {
    console.log(`Clicked reactor: ${reaction.getReactedBy().getName()}`);
  }}
/>

onError

Called when an error occurs during reactor detail fetching.

<CometChatReactions.Root
  message={message}
  onError={(error) => console.error("Reaction error:", error)}
/>

CSS Architecture

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

Key Selectors

Target	Selector
Root	.cometchat-reactions
Bar	.cometchat-reactions__bar
Chip	.cometchat-reactions__chip
Chip (active)	.cometchat-reactions__chip--active
Chip emoji	.cometchat-reactions__chip-emoji
Chip count	.cometchat-reactions__chip-count
Overflow	.cometchat-reactions__overflow
Info tooltip	.cometchat-reactions__info
Info content	.cometchat-reactions__info-content
List	.cometchat-reactions__list
List tabs	.cometchat-reactions__list-tabs
List tab (active)	.cometchat-reactions__list-tabs-tab--active
List items	.cometchat-reactions__list-items

Example: Custom chip styling

App.css

.cometchat-reactions__chip {
  border-radius: 8px;
  border-color: var(--cometchat-border-color-default);
}

.cometchat-reactions__chip--active {
  background: var(--cometchat-extended-primary-color-200);
}

Props

All props are optional unless noted otherwise.

---

message

The SDK message object to show reactions for. Required.

Type	CometChat.BaseMessage
Default	—

---

alignment

Bubble alignment for positioning the overflow popover.

Type	'left' | 'right' | 'center'
Default	'left'

---

reactionsRequestBuilder

Custom request builder for fetching reactor details.

Type	CometChat.ReactionsRequestBuilder
Default	undefined

---

onReactionClick

Called when a reaction chip is clicked. Parent handles the SDK call.

Type	(emoji: string, message: CometChat.BaseMessage) => void
Default	undefined

---

onReactorClick

Called when a user in the reaction list is clicked.

Type	(reaction: CometChat.Reaction, message: CometChat.BaseMessage) => void
Default	undefined

---

onError

Error callback for reactor detail fetching failures.

Type	(error: unknown) => void
Default	undefined

---

children

Custom sub-components. When omitted, renders the default Bar layout.

Type	ReactNode
Default	<CometChatReactions.Bar />

---

className

Optional custom CSS class for the root container.

Type	string
Default	undefined

CSS Selectors

Target	Selector
Root	.cometchat-reactions
Bar	.cometchat-reactions__bar
Chip	.cometchat-reactions__chip
Chip (active)	.cometchat-reactions__chip--active
Chip emoji	.cometchat-reactions__chip-emoji
Chip count	.cometchat-reactions__chip-count
Overflow button	.cometchat-reactions__overflow
Overflow count	.cometchat-reactions__overflow-count
Info tooltip	.cometchat-reactions__info
Info content	.cometchat-reactions__info-content
Info emoji	.cometchat-reactions__info-emoji
Info title	.cometchat-reactions__info-title
Info description	.cometchat-reactions__info-description
Info loading	.cometchat-reactions__info-loading
Info error	.cometchat-reactions__info-error
List container	.cometchat-reactions__list
List tabs	.cometchat-reactions__list-tabs
List tab	.cometchat-reactions__list-tabs-tab
List tab (active)	.cometchat-reactions__list-tabs-tab--active
List items	.cometchat-reactions__list-items
List item	.cometchat-reactions__list-item
List error	.cometchat-reactions__list-error
List shimmer	.cometchat-reactions__list-shimmer