Reactions - CometChat Docs

AI Integration Quick Reference

Field	Value
Component	`CometChatReactions`
Package	`@cometchat/chat-uikit-react`
Import	`import { CometChatReactions } from "@cometchat/chat-uikit-react";`
CSS root class	`.cometchat-reactions`
Primary output	`onReactionClick: (emoji: string, message: CometChat.BaseMessage) => void` — emits the clicked reaction
Prerequisites	App wrapped in `CometChatProvider` with valid credentials + a logged-in user
Stitching	Pass the target `message`; wire `onReactionClick` / `onReactorClick` to handle taps
Full props	See 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.

This component is display-only. It renders reaction chips and tooltips but does not call the SDK to add or remove reactions. The parent owns all reaction SDK calls — it handles onReactionClick (to toggle a reaction via the SDK), supplies reactionsRequestBuilder, and passes an updated message prop down after each change. In practice the parent is Message List, which wires these calls for you. For a standalone reactor panel with removal support, use Reaction List.

Live Preview — interact with the reactions component.Open in Storybook ↗

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

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

Minimal Render

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

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.
`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>

For a standalone reactor list (the full list of who reacted, with tab filtering and pagination), use the dedicated CometChatReactionList component — it is separate from CometChatReactions.

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 provided by the UI Kit.

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`

hoverDebounceTime

Debounce delay (in milliseconds) before the hover tooltip (Info) appears when hovering a reaction chip.


Type	`number`
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`

​Where It Fits

​Minimal Render

​Sub-Components

​Custom Layout

​Actions and Events

​Callback Props

​onReactionClick

​onReactorClick

​onError

​CSS Architecture

​Key Selectors

​Example: Custom chip styling

​Props

​message

​alignment

​reactionsRequestBuilder

​hoverDebounceTime

​onReactionClick

​onReactorClick

​onError

​children

​className

​CSS Selectors

Where It Fits

Minimal Render

Sub-Components

Custom Layout

Actions and Events

Callback Props

onReactionClick

onReactorClick

onError

CSS Architecture

Key Selectors

Example: Custom chip styling

Props

message

alignment

reactionsRequestBuilder

hoverDebounceTime

onReactionClick

onReactorClick

onError

children

className

CSS Selectors