> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-llms-scoped-indexes.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>
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.