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

# ReactionListConfiguration

> ReactionListConfiguration — CometChat documentation.

You can modify the Reaction List component's properties using the ReactionListConfiguration object. To use a configuration, you simply need to pass it to respective parameter.

The ReactionListConfiguration supports the following properties:

### Configurable Properties

| Name                    | Description                                                                                                      |
| ----------------------- | ---------------------------------------------------------------------------------------------------------------- |
| reactionListStyle       | Styling properties and values of the `ReactionListStyle` component which controls the look of the reaction list. |
| reactionsRequestBuilder | An instance of `ReactionsRequestBuilder` which allows you to set various parameters for fetching reactions.      |
| loadingIconURL          | Asset URL for the loading icon. The default value points to an embedded loading icon.                            |
| errorIconURL            | Asset URL for the error icon. The default value points to an embedded error icon.                                |
| avatarStyle             | Styling properties and values of the `AvatarStyle` component which controls the look of the avatar.              |
| listItemStyle           | Styling properties and values of the `ListItemStyle` component which controls the look of the list item.         |
| reactionItemClicked     | Function to be called when a reaction item is clicked. It provides the reaction and message as parameters.       |

You can create an instance of `ReactionListConfiguration` and pass it as a property to customize these attributes.

```javascript theme={null}
const reactionListConfig = new ReactionListConfiguration({
    reactionListStyle: new ReactionListStyle({}),
    reactionsRequestBuilder: new CometChat.ReactionsRequestBuilder(),
    loadingIconURL: 'url_to_your_custom_loading_icon',
    errorIconURL: 'url_to_your_custom_error_icon',
    avatarStyle: new AvatarStyle(),
    listItemStyle: new ListItemStyle(),
    reactionItemClicked: (reaction, message) => {
      // Write your custom function here
    }
});
```

## Usage

```javascript theme={null}
    let messagesConfiguration = new MessagesConfiguration({
      messageListConfiguration:new MessageListConfiguration({
        reactionsConfiguration: new ReactionsConfiguration({
          reactionListConfiguration:reactionListConfig
        })
      })
    })
```

```javascript theme={null}
  <cometchat-conversations-with-messages [messagesConfiguration]="messagesConfiguration"></cometchat-conversations-with-messages>
```