> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-013b37f0.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Reactions List

## Overview

The `CometChatReactionListList` widget is designed to manage and display reactions associated with messages. It offers a user-friendly interface for users to express their reactions to messages and provides options to remove reactions when necessary. The widget intelligently organizes reactions by emoji, giving a clear overview of the variety of reactions for a message along with details of who reacted with each emoji.

The widget consists of two distinct lists: one at the top with horizontal scrolling to display unique reactions and their counts, allowing users to select reactions for further details. The middle list shows selected reactions and the users who reacted to them.

Additionally, the interface seamlessly integrates functionality to remove reactions added by the logged-in user.

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-013b37f0/_ZVOct4_grytF_ZN/images/72ed0475-reactions_list_overview_cometchat_screens-cca9aee1b756a775167e55ecf981bfcb.png?fit=max&auto=format&n=_ZVOct4_grytF_ZN&q=85&s=f38ccb17f2b648f7a5a56edc838b9307" alt="Image" width="4498" height="3121" data-path="images/72ed0475-reactions_list_overview_cometchat_screens-cca9aee1b756a775167e55ecf981bfcb.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-013b37f0/Ofh32iX_Ud49gQlR/images/076577de-reactions_list_overview_cometchat_screens-152765067d86cf28039399a79317547e.png?fit=max&auto=format&n=Ofh32iX_Ud49gQlR&q=85&s=6e9bd50a789472ee8b97cafa26d5e8cc" alt="Image" width="4498" height="3121" data-path="images/076577de-reactions_list_overview_cometchat_screens-152765067d86cf28039399a79317547e.png" />
  </Tab>
</Tabs>

## Usage

### Integration

`CometChatReactionList` is a widget that contains a list of reactions. It is commonly used within the CometChatMessageList, but it can be integrated into any widget. The widget requires a list of reactions (provided via the baseMessage) to function properly.

You can launch `CometChatReactionList` directly using `Navigator.push`, or you can define it as a widget within the `build` method of your `State` class.

##### 1. Using Navigator to Launch `CometChatReactionList`

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatReactionList(messageObject: baseMessageObject))); // BaseMessage object is required to launch this widget.
    ```
  </Tab>
</Tabs>

##### 2. Embedding `CometChatReactionList` as a Widget in the build Method

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
    import 'package:flutter/material.dart';

    class ReactionsListExample extends StatefulWidget {
      const ReactionsListExample({super.key});

      @override
      State<ReactionsListExample> createState() => _ReactionsListExampleState();
    }

    class _ReactionsListExampleState extends State<ReactionsListExample> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: SafeArea(
            child: CometChatReactionList(
              messageObject: baseMessageObject,
            ) // BaseMessage object is required to launch this widget.
          )
        );
      }
    }
    ```
  </Tab>
</Tabs>

***

### Actions

[Actions](/ui-kit/flutter/v4/components-overview#actions) dictate how a widget functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the widget to fit your specific needs.

##### 1. onTap

The `onTap` event is triggered when a user interacts with a reaction by pressing it, typically to indicate a response or provide feedback.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatReactionList(
      onTap: (Reaction reaction, BaseMessage baseMessage) {
        // TODO("Not yet implemented")
      },
    )
    ```
  </Tab>
</Tabs>

***

### Filters

**Filters** enable customization of the displayed data in a `widget`'s list by applying specific criteria. Using the `ReactionsRequestBuilder` in the Reaction List Widget, you can customize your reaction list based on various options to suit your requirements. For more information about ReactionsRequestBuilder, refer to the documentation on [ReactionsRequestBuilder](/sdk/flutter/reactions).

In the example below, we illustrate how to apply a filter to the reactions list, allowing you to specify a limit on the number of users who have reacted to a particular message.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatReactionList(
      messageObject: baseMessageObject,
      reactionRequestBuilder: ReactionsRequestBuilder()
        ..limit = 2,
    )
    ```
  </Tab>
</Tabs>

***

### Events

**Events** are triggered by a widget, enabling you to enhance its functionality. These events are global in scope, making them applicable across multiple areas of your application, and they can be added or removed as required.

The `CometChatReactionList` widget does not provide any available events.

***

## Customization

For customization aligned with your app's design, you can adjust the appearance of the Reaction List widget using our accessible methods. These methods enable you to tailor the experience and behavior to suit your specific needs.

### Style

Through Style, you can customize the visual presentation of the widget in your app. This includes controlling elements such as color, size, shape, and fonts to achieve the desired look and feel.

##### 1. Reactions List Style

The ReactionsListStyle class encapsulates properties that facilitate customization of the `CometChatReactionList` widget's visual appearance.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatReactionList(
      messageObject: baseMessageObject,
      reactionListStyle: ReactionListStyle(
          allReactionsTextStyle: const TextStyle(
            color: Colors.red,
            fontSize: 16,
          ),
          background: Color(0xFFE4EBF5),
          emptyTextStyle: const TextStyle(
            color: Colors.red,
            fontSize: 16,
          ),
          errorTextStyle: const TextStyle(
            color: Colors.red,
            fontSize: 16,
          ),
          subtitleTextStyle: const TextStyle(
            color: Colors.red,
            fontSize: 16,
          ),
          loadingIconTint: Colors.red
      ),
    )
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-013b37f0/dQp5dR1uMW0Wv-GD/images/6bf73c41-reactions_list_style_cometchat_screens-8eb29654702848acc794f40cbe20f594.png?fit=max&auto=format&n=dQp5dR1uMW0Wv-GD&q=85&s=ac4876e82feeacf7ffad3eff48629c9d" alt="Image" width="4498" height="3121" data-path="images/6bf73c41-reactions_list_style_cometchat_screens-8eb29654702848acc794f40cbe20f594.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-013b37f0/IZ1rzMD0yphZc4Xc/images/dfd6dccb-reactions_list_style_cometchat_screens-70d61f884dcc8ad7e1c01457f93412c4.png?fit=max&auto=format&n=IZ1rzMD0yphZc4Xc&q=85&s=e5b241eac90b7dd7ba4bae70063abe74" alt="Image" width="4498" height="3121" data-path="images/dfd6dccb-reactions_list_style_cometchat_screens-70d61f884dcc8ad7e1c01457f93412c4.png" />
  </Tab>
</Tabs>

The following properties are exposed by `ReactionListStyle`:

| **Property**              | **Description**                                                 | **Code**                           |
| ------------------------- | --------------------------------------------------------------- | ---------------------------------- |
| **loadingIconTint**       | The color tint for the loading icon.                            | `Color? loadingIconTint`           |
| **emptyTextStyle**        | The text style for the empty state message.                     | `TextStyle? emptyTextStyle`        |
| **errorTextStyle**        | The text style for the error state message.                     | `TextStyle? errorTextStyle`        |
| **subtitleTextStyle**     | The text style for the subtitle.                                | `TextStyle? subtitleTextStyle`     |
| **allReactionsTextStyle** | The text style for the "all reactions" message.                 | `TextStyle? allReactionsTextStyle` |
| **width**                 | The width of the reaction list container.                       | `double? width`                    |
| **height**                | The height of the reaction list container.                      | `double? height`                   |
| **background**            | The background color of the reaction list container.            | `Color? background`                |
| **gradient**              | The gradient for the background of the reaction list container. | `Gradient? gradient`               |
| **border**                | The border of the reaction list container.                      | `BoxBorder? border`                |
| **borderRadius**          | The border radius of the reaction list container.               | `double? borderRadius`             |

##### 2. Avatar Style

If you want to apply customized styles to the `Avatar` widget within the `CometChatReactionList` Widget, you can use the following code snippet. For more information you can refer [Avatar Styles](/ui-kit/flutter/v4/avatar#avatarstyle).

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatReactionList(
      messageObject: baseMessageObject,
      avatarStyle: AvatarStyle(
          border: Border.all(width: 5),
          borderRadius: 20,
          background: Colors.red
      )
    )
    ```
  </Tab>
</Tabs>

***

##### 3. ListItem Style

If you want to apply customized styles to the `ListItemStyle` widget within the `CometChatReactionList` Widget, you can use the following code snippet. For more information, you can refer [ListItem Styles](/ui-kit/flutter/v4/list-item#listitemstyle).

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatReactionList(
        messageObject: baseMessageObject,
        listItemStyle: ListItemStyle(
            background: Color(0xFFE4EBF5),
            borderRadius: 20,
            border: Border.all(width: 2),
            margin: const EdgeInsets.only(top: 10),
            padding: const EdgeInsets.only(left: 10)
      )
    )
    ```
  </Tab>
</Tabs>

***

### Functionality

These functional customizations provide ways to enhance the widget's overall experience. They allow for text modification, custom icon setting, and UI element visibility toggling.

The `CometChatReactionList` widget does not offer any additional functionality.

***

### Advanced

For advanced-level customization, you can set custom widgets to the widget. This lets you tailor each aspect of the widget to fit your exact needs and application aesthetics. You can create and define your widgets, layouts, and UI elements and then incorporate those into the widget.

***

#### LoadingStateView

You can customize the loading state widget in your `CometChatReactionList` by using the `.loadingStateView` method. This method allows you to set a custom loading widget that will be displayed while the reaction list is loading. It's important to note that using this method will **override** the default loading state functionality of the widget.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatReactionList(
      messageObject: baseMessageObject,
      loadingStateView: (context) {
        return SizedBox(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height/2,
          child: const Center(
              child: CircularProgressIndicator()
          ),
        ); // Replaced the placeholder with a custom widget.
      },
    )
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-013b37f0/PhOli_uzWYY61x6S/images/94fb1a00-reactions_list_loading_view_cometchat_screens-1af6b5ca1f1542011ada8d5e68814b52.png?fit=max&auto=format&n=PhOli_uzWYY61x6S&q=85&s=652ad9bd512b68b627456b750820b22c" alt="Image" width="4498" height="3121" data-path="images/94fb1a00-reactions_list_loading_view_cometchat_screens-1af6b5ca1f1542011ada8d5e68814b52.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-013b37f0/7ukcXXCqdNW8D4Ro/images/1edf943a-reactions_list_loading_view_cometchat_screens-c52f90bc363f91e417877c00fa86bf2d.png?fit=max&auto=format&n=7ukcXXCqdNW8D4Ro&q=85&s=3eaf45456008975d0080824b7a810be4" alt="Image" width="4498" height="3121" data-path="images/1edf943a-reactions_list_loading_view_cometchat_screens-c52f90bc363f91e417877c00fa86bf2d.png" />
  </Tab>
</Tabs>

***

#### EmptyStateView

You can set a custom `EmptyStateView` using `emptyStateView` to match the empty UI of your app.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatReactionList(
      messageObject: baseMessageObject,
      emptyStateView: (context) {
        return SizedBox(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height/2,
          child: const Center(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Spacer(),
                  Icon(Icons.sms_failed_outlined, color: Colors.red, size: 100,),
                  SizedBox(height: 20,),
                  Text("Your Custom Message"),
                  Spacer(),
                ],
              )
          ),
        );
      },
    )
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-013b37f0/Z7OD8lxLTfsN-Ym-/images/6f49d03c-reactions_list_empty_view_cometchat_screens-c2c1dbdede6bfc88c3d2e812cace8228.png?fit=max&auto=format&n=Z7OD8lxLTfsN-Ym-&q=85&s=ef112f99f8c213d5a7a1eb49c7286f46" alt="Image" width="4498" height="3121" data-path="images/6f49d03c-reactions_list_empty_view_cometchat_screens-c2c1dbdede6bfc88c3d2e812cace8228.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-013b37f0/crySXmrfj1cbCy1Q/images/29c2d030-reactions_list_empty_view_cometchat_screens-42a3dde5f9ccfa92cb4f2960c699e1e5.png?fit=max&auto=format&n=crySXmrfj1cbCy1Q&q=85&s=5960bc9e6a2df87dde90d3f40c54f732" alt="Image" width="4498" height="3121" data-path="images/29c2d030-reactions_list_empty_view_cometchat_screens-42a3dde5f9ccfa92cb4f2960c699e1e5.png" />
  </Tab>
</Tabs>

***

#### ErrorStateView

You can customize the error state widget in your `CometChatReactionList` by using the \`\` method. This method allows you to set a custom error widget that will be displayed when there's an error in loading the reaction list. It's important to note that using this method will **override** the default error state functionality of the widget.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatReactionList(
        messageObject: baseMessageObject,
        listItemStyle: ListItemStyle(
            background: Color(0xFFE4EBF5),
            borderRadius: 20,
            border: Border.all(width: 2),
            margin: const EdgeInsets.only(top: 10),
            padding: const EdgeInsets.only(left: 10)
      )
    )
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-013b37f0/HXCEtxvU3PM74z8P/images/42c9de12-reactions_list_error_view_cometchat_screens-523bd5b7bf63fed253795a337d55e21a.png?fit=max&auto=format&n=HXCEtxvU3PM74z8P&q=85&s=b4b39ceadb946cc090cf7d0305c27fcd" alt="Image" width="4498" height="3121" data-path="images/42c9de12-reactions_list_error_view_cometchat_screens-523bd5b7bf63fed253795a337d55e21a.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-013b37f0/gwyRT6PY8hzLhEaL/images/6549899f-reactions_list_error_view_cometchat_screens-6c960255a3308334bc93296435c029fa.png?fit=max&auto=format&n=gwyRT6PY8hzLhEaL&q=85&s=e7d5b3cd92dec615851ba268a567188e" alt="Image" width="4498" height="3121" data-path="images/6549899f-reactions_list_error_view_cometchat_screens-6c960255a3308334bc93296435c029fa.png" />
  </Tab>
</Tabs>

***