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

# User Member Wrapper

> User Member Wrapper — CometChat documentation.

The CometChatUserMemberWrapper is a UI component that combines the features of CometChatUsers and CometChatGroupMemberWrapper. It's designed to work behind the scenes in the CometChatMessageComposer to show a simple and smart list of suggestions when users want to mention others in their messages. This makes it easier for users to engage with each other and manage group conversations in a smooth and convenient way.

## Properties

### userMemberListType

Determines the type of the user member list.

| Name               | Type               | Description                                                                                     |
| ------------------ | ------------------ | ----------------------------------------------------------------------------------------------- |
| userMemberListType | UserMemberListType | Enum that can have one of two values: `UserMemberListType.USERS` or `UserMemberListType.GROUPS` |

### onItemClick

Event handler for item click events.

| Name        | Type                                                          | Description                                                               |
| ----------- | ------------------------------------------------------------- | ------------------------------------------------------------------------- |
| onItemClick | (userMember: CometChat.User \| CometChat.GroupMember) => void | Event handler method that triggers when a user or group member is clicked |

### listItemView

Custom view for the item list.

| Name         | Type | Description                |
| ------------ | ---- | -------------------------- |
| listItemView | view | Custom view for list items |

### avatarStyle

Style properties for the avatar component.

| Name        | Type        | Description                     |
| ----------- | ----------- | ------------------------------- |
| avatarStyle | AvatarStyle | Style properties for the avatar |

### statusIndicatorStyle

Style properties for the status indicator.

| Name                 | Type   | Description                               |
| -------------------- | ------ | ----------------------------------------- |
| statusIndicatorStyle | object | Style properties for the status indicator |

### searchKeyword

Keyword for searching user members.

| Name          | Type   | Description                        |
| ------------- | ------ | ---------------------------------- |
| searchKeyword | string | Keyword for searching user members |

### group

The group of which members to be listed.

| Name  | Type            | Description                                 |
| ----- | --------------- | ------------------------------------------- |
| group | CometChat.Group | The group of which members are to be listed |

### subtitleView

Custom view for the subtitle.

| Name         | Type | Description                  |
| ------------ | ---- | ---------------------------- |
| subtitleView | view | Custom view for the subtitle |

### usersRequestBuilder

Request builder for fetching users.

| Name                | Type                          | Description                                                        |
| ------------------- | ----------------------------- | ------------------------------------------------------------------ |
| usersRequestBuilder | CometChat.UsersRequestBuilder | Class that allows you to set various parameters to fetch the users |

### disableUsersPresence

To disable the display of user presence.

| Name                 | Type    | Description                                            |
| -------------------- | ------- | ------------------------------------------------------ |
| disableUsersPresence | boolean | When set to true, users presence will not be displayed |

### userPresencePlacement

Placement of the user presence.

| Name                  | Type                  | Description                                   |
| --------------------- | --------------------- | --------------------------------------------- |
| userPresencePlacement | UserPresencePlacement | Determines the placement of the user presence |

### hideSeperator

To hide the separator between list items.

| Name          | Type    | Description                                    |
| ------------- | ------- | ---------------------------------------------- |
| hideSeperator | boolean | When set to true, the separator will be hidden |

### loadingStateView

Custom view for the loading state.

| Name             | Type | Description                                   |
| ---------------- | ---- | --------------------------------------------- |
| loadingStateView | view | Custom view for the component's loading state |

### onEmpty

Event handler for empty state.

| Name    | Type       | Description                          |
| ------- | ---------- | ------------------------------------ |
| onEmpty | () => void | Event handler method for empty state |

### onError

Event handler for error state.

| Name    | Type                                          | Description                          |
| ------- | --------------------------------------------- | ------------------------------------ |
| onError | (error: CometChat.CometChatException) => void | Event handler method for error state |

### groupMemberRequestBuilder

Request builder for fetching group members.

| Name                      | Type                                 | Description                                                                |
| ------------------------- | ------------------------------------ | -------------------------------------------------------------------------- |
| groupMemberRequestBuilder | CometChat.GroupMembersRequestBuilder | Class that allows you to set various parameters to fetch the group members |

### loadingIconUrl

URL for the loading icon.

| Name           | Type   | Description              |
| -------------- | ------ | ------------------------ |
| loadingIconUrl | string | URL for the loading icon |

### disableLoadingState

To disable the loading state.

| Name                | Type    | Description                                          |
| ------------------- | ------- | ---------------------------------------------------- |
| disableLoadingState | boolean | When set to true, the loading state will be disabled |

## Usage

```tsx theme={null}
<CometChatUserMemberWrapperComponent
  userMemberListType="userMemberListTypeEnum.USERS"
  onItemClick="onItemClick"
  listItemView="listItemView"
  avatarStyle="avatarStyle"
  statusIndicatorStyle="statusIndicatorStyle"
  searchKeyword="searchKeyword"
  group="group"
  subtitleView="subtitleView"
  usersRequestBuilder="usersRequestBuilder"
  disableUsersPresence="disableUsersPresence"
  userPresencePlacement="userPresencePlacement"
  hideSeperator="hideSeperator"
  loadingStateView="loadingStateView"
  onEmpty="onEmpty"
  onError="onError"
  groupMemberRequestBuilder="groupMemberRequestBuilder"
  loadingIconUrl="loadingIconUrl"
  disableLoadingState="disableLoadingState"
></CometChatUserMemberWrapperComponent>
```