Reaction List - CometChat Docs

AI Integration Quick Reference

{
  "component": "CometChatReactionList",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatReactionList } from \"@cometchat/chat-uikit-react\";",
  "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
  "description": "Standalone panel showing who reacted to a message, with emoji tab filtering, pagination, and optimistic removal for the current user.",
  "cssRootClass": ".cometchat-reaction-list",
  "primaryOutput": {
    "prop": "onItemClick",
    "type": "(reaction: CometChat.Reaction, message: CometChat.BaseMessage) => void"
  },
  "props": {
    "data": {
      "message": { "type": "CometChat.BaseMessage", "note": "Required. The message to show reactions for." },
      "reactionsRequestBuilder": { "type": "CometChat.ReactionsRequestBuilder" }
    },
    "callbacks": {
      "onItemClick": { "type": "(reaction: CometChat.Reaction, message: CometChat.BaseMessage) => void", "note": "Fires only for current user's reactions (to remove)." },
      "onEmpty": { "type": "() => void", "note": "Fires when all reactions are removed. Parent should close the panel." },
      "onError": { "type": "(error: unknown) => void" }
    }
  },
  "types": {
    "CometChatReactionListRootProps": "Root provider props",
    "CometChatReactionListTabsProps": "Emoji tab bar props",
    "CometChatReactionListItemsProps": "Scrollable reactor list props",
    "CometChatReactionListLoadingStateProps": "Shimmer loading state props",
    "CometChatReactionListErrorStateProps": "Error state props",
    "CometChatReactionListEmptyStateProps": "Empty state props",
    "CometChatReactionListContextValue": "Full context value"
  }
}

Where It Fits

CometChatReactionList is a standalone component — it manages its own state and does not depend on CometChatReactions.Root context. It is distinct from CometChatReactions.List, which is a sub-component of CometChatReactions.

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

Use CometChatReactionList when you want to show a dedicated panel (e.g., inside a popover or bottom sheet) listing all users who reacted to a message, with tab filtering by emoji and the ability for the current user to remove their own reaction. The parent component (typically CometChatMessageList) owns the SDK reaction add/remove calls and passes an updated message prop when reactions change.

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

function ReactionPanel({ message, onClose }) {
  return (
    <CometChatReactionList
      message={message}
      onItemClick={(reaction, msg) => {
        // Parent calls SDK to remove the reaction
        CometChat.removeReaction(String(msg.getId()), reaction.getReaction());
      }}
      onEmpty={onClose}
    />
  );
}

Minimal Render

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

function Demo({ message }) {
  return <CometChatReactionList message={message} />;
}

Root CSS class: .cometchat-reaction-list

Sub-Components

CometChatReactionList is a compound component with these sub-components:

Sub-Component	Purpose
`Root`	Context provider. Receives message and config. Renders default layout when no children.
`Tabs`	Emoji tab bar — “All” tab plus one tab per unique emoji. Keyboard navigable.
`Items`	Scrollable list of users who reacted. IntersectionObserver pagination.
`LoadingState`	Shimmer loading placeholder. Self-hides when not loading.
`ErrorState`	Error message with retry button. Self-hides when not in error state.
`EmptyState`	Empty message. Self-hides when not empty.

Custom Layout

Compose sub-components to customize the layout:

<CometChatReactionList.Root message={message} onItemClick={handleRemove}>
  <CometChatReactionList.Tabs />
  <CometChatReactionList.LoadingState />
  <CometChatReactionList.ErrorState />
  <CometChatReactionList.EmptyState />
  <CometChatReactionList.Items />
</CometChatReactionList.Root>

Custom Header

Add a custom header above the tabs:

<CometChatReactionList.Root message={message}>
  <div className="my-header">Reactions</div>
  <CometChatReactionList.Tabs />
  <CometChatReactionList.Items />
</CometChatReactionList.Root>

Actions and Events

Callback Props

onItemClick

Called when a reaction item is clicked. Only fires for the current user’s own reactions — non-current-user items are read-only. The parent should call the SDK to remove the reaction.

<CometChatReactionList
  message={message}
  onItemClick={(reaction, msg) => {
    CometChat.removeReaction(String(msg.getId()), reaction.getReaction())
      .then(() => console.log("Reaction removed"))
      .catch(console.error);
  }}
/>

onEmpty

Called when all reactions are removed (after optimistic removal). The parent should close the panel.

const [showPanel, setShowPanel] = useState(true);

{showPanel && (
  <CometChatReactionList
    message={message}
    onEmpty={() => setShowPanel(false)}
  />
)}

onError

Called when an error occurs during reaction fetching.

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

Behavior Details

Emoji Tabs

“All” tab shows every reactor across all emojis.
Per-emoji tabs show only reactors for that emoji.
Tab counts update optimistically when the current user removes a reaction.
Keyboard navigation: ArrowLeft / ArrowRight to move between tabs, Enter / Space to select.

Reactor Items

Each item shows: avatar, name (or “You” for the current user), “Click to remove” hint (current user only), and the emoji.
Current user items: cursor: pointer, tabIndex={0}, clickable via Enter / Space.
Non-current-user items: cursor: default, tabIndex={-1}, not interactive.

Pagination

Reactions are fetched in pages (default limit: 30). An IntersectionObserver sentinel at the bottom of the list triggers fetchMore() when the user scrolls near the bottom.

Optimistic Removal

When the current user clicks their reaction:

The reaction is removed from the list immediately (optimistic update).
onItemClick is called so the parent can call the SDK.
If no reactions remain, onEmpty is called.

The component does not call the SDK itself — the parent owns that responsibility.

Custom Request Builder

Pass a custom ReactionsRequestBuilder to control the fetch limit or other parameters:

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

const builder = new CometChat.ReactionsRequestBuilder().setLimit(50);

<CometChatReactionList
  message={message}
  reactionsRequestBuilder={builder}
/>

CSS Architecture

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

Key Selectors

Target	Selector
Root	`.cometchat-reaction-list`
Tabs bar	`.cometchat-reaction-list__tabs`
Tab button	`.cometchat-reaction-list__tabs-tab`
Tab (active)	`.cometchat-reaction-list__tabs-tab--active`
Tab emoji	`.cometchat-reaction-list__tabs-tab-emoji`
Tab emoji (active)	`.cometchat-reaction-list__tabs-tab-emoji--active`
Tab count	`.cometchat-reaction-list__tabs-tab-count`
Tab count (active)	`.cometchat-reaction-list__tabs-tab-count--active`
Items list	`.cometchat-reaction-list__list`
List item	`.cometchat-reaction-list__list-item`
Item (current user)	`.cometchat-reaction-list__list-item--current-user`
Item (read-only)	`.cometchat-reaction-list__list-item--readonly`
Item avatar	`.cometchat-reaction-list__item-avatar`
Item name	`.cometchat-reaction-list__item-name`
Item hint	`.cometchat-reaction-list__item-hint`
Item emoji	`.cometchat-reaction-list__item-emoji`
Shimmer	`.cometchat-reaction-list__shimmer`
Error	`.cometchat-reaction-list__error`
Retry button	`.cometchat-reaction-list__retry-button`
Empty	`.cometchat-reaction-list__empty`
Loading more	`.cometchat-reaction-list__loading-more`
Spinner	`.cometchat-reaction-list__spinner`

Example: Custom styling

App.css

/* Wider panel */
.cometchat-reaction-list {
  width: 320px;
}

/* Custom active tab color */
.cometchat-reaction-list__tabs-tab--active {
  border-bottom-color: var(--my-brand-color);
}

.cometchat-reaction-list__tabs-tab-emoji--active,
.cometchat-reaction-list__tabs-tab-count--active {
  color: var(--my-brand-color);
}

Props

All props are optional unless noted otherwise.

message

The SDK message object to show reactions for. Required.


Type	`CometChat.BaseMessage`
Default	—

reactionsRequestBuilder

Custom request builder for fetching reactor details. Controls limit and other fetch parameters.


Type	`CometChat.ReactionsRequestBuilder`
Default	`new CometChat.ReactionsRequestBuilder().setLimit(30)`

onItemClick

Called when the current user clicks their own reaction item (to remove it). Not called for other users’ reactions.


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

onEmpty

Called when all reactions are removed. The parent should close the panel.


Type	`() => void`
Default	`undefined`

onError

Error callback for reaction fetching failures.


Type	`(error: unknown) => void`
Default	`undefined`

children

Custom sub-components. When omitted, renders the default layout (Tabs + LoadingState + ErrorState + EmptyState + Items).


Type	`ReactNode`
Default	Default layout

className

Optional custom CSS class for the root container.


Type	`string`
Default	`undefined`

Accessibility

Root has role="dialog" and aria-label="Reaction list".
Tab bar has role="tablist" with aria-label="Reaction filters".
Each tab has role="tab" and aria-selected.
Items container has role="list" with a descriptive aria-label.
Each item has role="listitem" and aria-label describing the user, emoji, and hint.
Current user items have tabIndex={0} and respond to Enter / Space.
Read-only items have tabIndex={-1}.
All interactive elements have :focus-visible styles.
Shimmer respects prefers-reduced-motion.
Spinner respects prefers-reduced-motion.
High contrast mode supported via @media (prefers-contrast: high).

​Where It Fits

​Minimal Render

​Sub-Components

​Custom Layout

​Custom Header

​Actions and Events

​Callback Props

​onItemClick

​onEmpty

​onError

​Behavior Details

​Emoji Tabs

​Reactor Items

​Pagination

​Optimistic Removal

​Custom Request Builder

​CSS Architecture

​Key Selectors

​Example: Custom styling

​Props

​message

​reactionsRequestBuilder

​onItemClick

​onEmpty

​onError

​children

​className

​Accessibility

Where It Fits

Minimal Render

Sub-Components

Custom Layout

Custom Header

Actions and Events

Callback Props

onItemClick

onEmpty

onError

Behavior Details

Emoji Tabs

Reactor Items

Pagination

Optimistic Removal

Custom Request Builder

CSS Architecture

Key Selectors

Example: Custom styling

Props

message

reactionsRequestBuilder

onItemClick

onEmpty

onError

children

className

Accessibility