> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Reactions

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

<Accordion title="AI Integration Quick Reference">
  ```json theme={null}
  {
    "component": "CometChatReactions",
    "package": "@cometchat/chat-uikit-react",
    "import": "import { CometChatReactions } from \"@cometchat/chat-uikit-react\";",
    "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" }
      },
      "config": {
        "hoverDebounceTime": { "type": "number", "note": "Debounce (ms) before showing the hover tooltip." }
      }
    },
    "types": {
      "CometChatReactionsRootProps": "Root provider props",
      "CometChatReactionsBarProps": "Reaction chips bar props",
      "CometChatReactionsChipProps": "Single reaction chip props",
      "CometChatReactionsInfoProps": "Hover tooltip props",
      "CometChatReactionsOverflowProps": "Overflow button props"
    }
  }
  ```
</Accordion>

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

<Info>
  **Live Preview** — interact with the reactions component.

  [Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-misc-reactions--default)
</Info>

<iframe src="https://storybook.cometchat.io/react/iframe.html?id=components-misc-reactions--default&viewMode=story&shortcuts=false&singleStory=true" className="w-full rounded-xl" loading="lazy" style={{height: "100px", border: "1px solid #e0e0e0"}} title="CometChat Reactions — Default" allow="clipboard-write" />

```tsx lines theme={null}
import { CometChatReactions } from "@cometchat/chat-uikit-react";

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

## Minimal Render

```tsx lines theme={null}
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:

```tsx lines theme={null}
<CometChatReactions.Root message={message}>
  <CometChatReactions.Bar maxVisible={5} />
</CometChatReactions.Root>
```

<Note>
  For a standalone reactor list (the full list of who reacted, with tab filtering and pagination), use the dedicated [`CometChatReactionList`](/ui-kit/react/components/reaction-list) component — it is separate from `CometChatReactions`.
</Note>

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

```tsx lines theme={null}
<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.

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

#### onError

Called when an error occurs during reactor detail fetching.

```tsx lines theme={null}
<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

```css lines title="App.css" theme={null}
.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`          |