Reaction List - CometChat Docs

The CometChatReactionList component displays all users who have reacted to a message. It groups reactions by emoji type and allows filtering by specific emoji, providing a comprehensive view of message reactions with pagination support.

Overview

The Reaction List component provides a detailed view of message reactions:

Emoji Tabs: Filter reactions by specific emoji or view all reactions
User Display: Shows avatar, name, and reaction emoji for each user
Current User Highlighting: Highlights the logged-in user’s reactions with removal hint
Pagination: Automatically loads more reactions when scrolling
Keyboard Navigation: Full keyboard accessibility for tabs and items
Click Handling: Emits events when reaction items are clicked (useful for removing own reactions)
Loading & Error States: Displays appropriate states during data fetching

Live Preview — default reaction list preview. Open in Storybook ↗

Reaction List Structure

The Reaction List component has a tabbed interface with a scrollable list:

+-----------------------------------------------------------------------------+
|                        Reaction List Structure                              |
+-----------------------------------------------------------------------------+
|                                                                             |
|  +-----------------------------------------------------------------------+ |
|  |                          Emoji Tabs                                   | |
|  |  +---------+  +---------+  +---------+  +---------+  +---------+     | |
|  |  | All (8) |  | 👍 (3)  |  | ❤️ (2)  |  | 😂 (2)  |  | 🎉 (1)  |     | |
|  |  +---------+  +---------+  +---------+  +---------+  +---------+     | |
|  +-----------------------------------------------------------------------+ |
|                                                                             |
|  +-----------------------------------------------------------------------+ |
|  |                       Reaction Items List                             | |
|  |  +-------------------------------------------------------------------+ | |
|  |  |  +--------+  +-----------------------------+  +--------------+   | | |
|  |  |  | Avatar |  | User Name                   |  |    Emoji     |   | | |
|  |  |  |        |  | (Click to remove - if you)  |  |      👍      |   | | |
|  |  |  +--------+  +-----------------------------+  +--------------+   | | |
|  |  +-------------------------------------------------------------------+ | |
|  |  +-------------------------------------------------------------------+ | |
|  |  |  +--------+  +-----------------------------+  +--------------+   | | |
|  |  |  | Avatar |  | Another User                |  |    Emoji     |   | | |
|  |  |  |        |  |                             |  |      ❤️      |   | | |
|  |  |  +--------+  +-----------------------------+  +--------------+   | | |
|  |  +-------------------------------------------------------------------+ | |
|  |                             ...                                       | |
|  +-----------------------------------------------------------------------+ |
|                                                                             |
+-----------------------------------------------------------------------------+

Basic Usage

Simple Reaction List

import { Component } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import { CometChatReactionListComponent } from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-reaction-list-demo',
  standalone: true,
  imports: [CometChatReactionListComponent],
  template: `
    <cometchat-reaction-list
      [message]="selectedMessage"
      (itemClick)="onReactionItemClick($event)">
    </cometchat-reaction-list>
  `
})
export class ReactionListDemoComponent {
  selectedMessage!: CometChat.BaseMessage;

  onReactionItemClick(event: { reaction: CometChat.Reaction; message: CometChat.BaseMessage }): void {
    console.log('Reaction clicked:', event.reaction.getReaction());
    console.log('By user:', event.reaction.getReactedBy().getName());
    
    // If it's the current user's reaction, you might want to remove it
    // this.removeReaction(event.message, event.reaction);
  }
}

With Custom Reactions Request Builder

import { Component } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import { CometChatReactionListComponent } from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-custom-reaction-list',
  standalone: true,
  imports: [CometChatReactionListComponent],
  template: `
    <cometchat-reaction-list
      [message]="message"
      [reactionsRequestBuilder]="customRequestBuilder"
      (itemClick)="onItemClick($event)">
    </cometchat-reaction-list>
  `
})
export class CustomReactionListComponent {
  message!: CometChat.BaseMessage;
  customRequestBuilder!: CometChat.ReactionsRequestBuilder;

  ngOnInit(): void {
    // Create a custom request builder with specific limit
    this.customRequestBuilder = new CometChat.ReactionsRequestBuilder()
      .setMessageId(this.message.getId())
      .setLimit(20);
  }

  onItemClick(event: { reaction: CometChat.Reaction; message: CometChat.BaseMessage }): void {
    console.log('Reaction item clicked:', event);
  }
}

API Reference

Properties

Property	Type	Default	Description
`message`	`CometChat.BaseMessage`	required	The message to show reactions for
`reactionsRequestBuilder`	`CometChat.ReactionsRequestBuilder`	`undefined`	Custom reactions request builder for fetching reactions

Events

Event	Payload Type	Description
`itemClick`	`{ reaction: CometChat.Reaction; message: CometChat.BaseMessage }`	Emitted when a reaction item (user) is clicked. Use this to handle reaction removal for the current user.
`empty`	`void`	Emitted when the reaction list becomes empty (all reactions removed)

Customization

CSS Variables

The Reaction List component uses CSS variables for styling. You can customize its appearance by overriding these variables:

/* Custom reaction list styling */
.cometchat-reaction-list {
  /* Override max dimensions */
  max-width: 400px;
  max-height: 500px;
}

/* Custom tab styling */
.cometchat-reaction-list__tabs-tab {
  padding: var(--cometchat-spacing-2) var(--cometchat-spacing-4);
}

.cometchat-reaction-list__tabs-tab-active {
  border-bottom: 2px solid var(--cometchat-primary-color);
}

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

/* Custom item styling */
.cometchat-reaction-list__list-item {
  padding: var(--cometchat-spacing-3) var(--cometchat-spacing-4);
}

.cometchat-reaction-list__list-item:hover {
  background: var(--cometchat-background-color-02);
}

/* Current user item highlight */
.cometchat-reaction-list__list-item--current-user {
  background: var(--cometchat-extended-primary-color-50);
}

/* Custom avatar size */
.cometchat-reaction-list__item-avatar {
  width: 40px;
  height: 40px;
}

/* Custom name styling */
.cometchat-reaction-list__item-name {
  font: var(--cometchat-font-body-bold);
  color: var(--cometchat-text-color-primary);
}

/* Custom emoji size */
.cometchat-reaction-list__item-emoji {
  font-size: 24px;
}

Theming

The component automatically adapts to light and dark themes through CSS variables:

/* Light theme (default) */
:root {
  --cometchat-primary-color: #6852D6;
  --cometchat-background-color-01: #FFFFFF;
  --cometchat-background-color-02: #FAFAFA;
  --cometchat-extended-primary-color-50: #F5F3FD;
  --cometchat-extended-primary-color-100: #EBE8FA;
}

/* Dark theme */
[data-theme="dark"] {
  --cometchat-primary-color: #8B7BE8;
  --cometchat-background-color-01: #1A1A1A;
  --cometchat-background-color-02: #2A2A2A;
  --cometchat-extended-primary-color-50: #2D2840;
  --cometchat-extended-primary-color-100: #3D3560;
}

Custom Reaction List Container

If you need complete control over the reaction list presentation, you can wrap it in a custom container:

import { Component } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import { CometChatReactionListComponent } from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-custom-reaction-container',
  standalone: true,
  imports: [CometChatReactionListComponent],
  template: `
    <div class="custom-reaction-container">
      <!-- Custom Header -->
      <div class="custom-reaction-container__header">
        <span class="custom-reaction-container__icon">💬</span>
        <h3 class="custom-reaction-container__title">
          {{ 'message_bubble_reactions' | translate }}
        </h3>
        <span class="custom-reaction-container__count">
          {{ getTotalReactionCount() }}
        </span>
      </div>

      <!-- Reaction List -->
      <div class="custom-reaction-container__content">
        <cometchat-reaction-list
          [message]="message"
          (itemClick)="onItemClick($event)">
        </cometchat-reaction-list>
      </div>

      <!-- Custom Footer -->
      <div class="custom-reaction-container__footer">
        <button 
          class="custom-reaction-container__add-btn"
          (click)="onAddReaction()">
          {{ 'reaction_list_add' | translate }}
        </button>
      </div>
    </div>
  `,
  styles: [`
    .custom-reaction-container {
      display: flex;
      flex-direction: column;
      background: var(--cometchat-background-color-01);
      border-radius: var(--cometchat-radius-4);
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }

    .custom-reaction-container__header {
      display: flex;
      align-items: center;
      gap: var(--cometchat-spacing-2);
      padding: var(--cometchat-spacing-4);
      background: var(--cometchat-extended-primary-color-50);
      border-bottom: 1px solid var(--cometchat-border-color-light);
    }

    .custom-reaction-container__icon {
      font-size: 20px;
    }

    .custom-reaction-container__title {
      font: var(--cometchat-font-heading4-bold);
      color: var(--cometchat-text-color-primary);
      margin: 0;
      flex: 1;
    }

    .custom-reaction-container__count {
      font: var(--cometchat-font-body-medium);
      color: var(--cometchat-primary-color);
      background: var(--cometchat-background-color-01);
      padding: var(--cometchat-spacing-1) var(--cometchat-spacing-3);
      border-radius: var(--cometchat-radius-max);
    }

    .custom-reaction-container__content {
      flex: 1;
      overflow: hidden;
    }

    .custom-reaction-container__footer {
      padding: var(--cometchat-spacing-3) var(--cometchat-spacing-4);
      border-top: 1px solid var(--cometchat-border-color-light);
    }

    .custom-reaction-container__add-btn {
      width: 100%;
      padding: var(--cometchat-spacing-3);
      background: var(--cometchat-primary-color);
      color: var(--cometchat-static-white);
      border: none;
      border-radius: var(--cometchat-radius-2);
      font: var(--cometchat-font-button-medium);
      cursor: pointer;
      transition: background-color 0.2s ease;
    }

    .custom-reaction-container__add-btn:hover {
      background: var(--cometchat-extended-primary-color-700);
    }

    .custom-reaction-container__add-btn:focus {
      outline: 2px solid var(--cometchat-primary-color);
      outline-offset: 2px;
    }
  `]
})
export class CustomReactionContainerComponent {
  message!: CometChat.BaseMessage;

  getTotalReactionCount(): number {
    const reactions = this.message.getReactions() || [];
    return reactions.reduce((total, r) => total + r.getCount(), 0);
  }

  onItemClick(event: { reaction: CometChat.Reaction; message: CometChat.BaseMessage }): void {
    console.log('Reaction clicked:', event);
  }

  onAddReaction(): void {
    console.log('Add reaction clicked');
    // Open emoji picker
  }
}

Accessibility

The Reaction List component is built with accessibility in mind:

Key	Action
`Tab`	Move focus between tabs and reaction items
`ArrowLeft`	Move to previous tab
`ArrowRight`	Move to next tab
`Home`	Move to first tab
`End`	Move to last tab
`Enter` / `Space`	Select tab or activate reaction item

ARIA Attributes

Element	Attribute	Value	Description
Container	`role`	`"dialog"`	Indicates the component is a dialog
Container	`aria-label`	Localized “Reactions”	Describes the dialog purpose
Tab list	`role`	`"tablist"`	Indicates a tab navigation
Tab	`role`	`"tab"`	Indicates a tab button
Tab	`aria-selected`	`"true"` / `"false"`	Indicates selection state
Tab	`tabindex`	`"0"` / `"-1"`	Controls focus order
Item list	`role`	`"list"`	Indicates a list of items
Item	`role`	`"listitem"`	Indicates a list item
Item	`aria-label`	Dynamic	Describes user and reaction

The component provides descriptive labels for screen readers:

Tab labels include emoji and count (e.g., ”👍 3 reactions”)
Reaction items announce user name and emoji
Current user items include removal hint
Loading and error states are announced via aria-live

Best Practices

Performance Considerations

Pagination: The component automatically paginates reactions. The default limit is 10 reactions per page.
Lazy Loading: Reactions are loaded on scroll, reducing initial load time.
Change Detection: Uses OnPush change detection strategy for optimal performance.

UX Recommendations

Clear Removal Action: When displaying the current user’s reactions, clearly indicate they can click to remove.
Loading Feedback: Show loading indicators when fetching reactions.
Error Handling: Provide retry functionality when errors occur.
Mobile Optimization: Use bottom sheet presentation on mobile devices.

Integration Tips

Popover Positioning: Position the reaction list near the message for context.
Dismiss on Outside Click: Close the reaction list when clicking outside.
Keyboard Escape: Allow closing with the Escape key.
Real-time Updates: Listen for reaction events to update the list in real-time.

CometChatMessageList - Parent component that displays messages with reactions
CometChatMessageBubble - Message container with reaction display
CometChatEmojiKeyboard - Emoji picker for adding reactions
CometChatPopover - Popover component for displaying reaction list

​Overview

​Reaction List Structure

​Basic Usage

​Simple Reaction List

​With Custom Reactions Request Builder

​API Reference

​Properties

​Events

​Customization

​CSS Variables

​Theming

​Custom Reaction List Container

​Accessibility

​Keyboard Navigation

​ARIA Attributes

​Screen Reader Support

​Best Practices

​Performance Considerations

​UX Recommendations

​Integration Tips

​Related Components

Overview

Reaction List Structure

Basic Usage

Simple Reaction List

With Custom Reactions Request Builder

API Reference

Properties

Events

Customization

CSS Variables

Theming

Custom Reaction List Container

Accessibility

Keyboard Navigation

ARIA Attributes

Screen Reader Support

Best Practices

Performance Considerations

UX Recommendations

Integration Tips

Related Components