> ## Documentation Index > Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Users > Users — CometChat documentation. This component lists all the users registered on CometChat and also allows users to search for other users. It enables users to find and locate specific individuals based on various search criteria or parameters. Online users are represented with a green colored dot. ## Properties ### Title Heading text for the component | Name | Type | Description | | -------------- | ------ | ----------------------------------------------- | | title | string | Heading text for the component | | titleAlignment | string | Alignment of the heading text for the component | ### Search | Name | Type | Description | | ----------------- | ------- | ---------------------------------------------------------------------- | | searchPlaceholder | string | Sample text that appears in the search input as a prompt or suggestion | | searchIconURL | string | Asset URL for the search icon. | | hideSearch | boolean | When set to true, hides the search input. | ### Section Header | Name | Type | Description | | ----------------- | ------- | ---------------------------------------------------------------------------------- | | showSectionHeader | boolean | When set to true, displays the header between the individual sections in the list. | ### Loading state This refers to the state of the conversations component when it is actively retrieving or fetching data. | Name | Type | Description | | ---------------- | ------ | --------------------------------------------------------- | | loadingIconURL | string | Asset URL for the loading indicator icon | | loadingStateView | view | User-defined component to customise the loading indicator | ### Empty state This refers to the state of the conversations component when it has no content or data to display | Name | Type | Description | | -------------- | ------ | --------------------------------------------------------------------- | | emptyStateText | string | The textual content displayed in the empty state of the component. | | emptyStateView | view | User-defined component to customise the empty state of the component. | ### Error state This refers to the state of the conversations component when an error occurs during the retrieval of the data. | Name | Type | Description | | -------------- | ------ | --------------------------------------------------------------------- | | errorStateText | string | The textual content displayed in the error state of the component. | | errorStateView | view | User-defined component to customise the error state of the component. | ### RequestBuilder | Name | Type | Description | | -------------------- | -------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | | searchRequestBuilder | [CometChat.UsersRequestBuilder](/sdk/javascript/retrieve-users#retrieve-list-of-users) | Class that allows you to set various search parameters to the `UsersRequest` class based on which the users are fetched | | usersRequestBuilder | [CometChat.UsersRequestBuilder](/sdk/javascript/retrieve-users#retrieve-list-of-users) | Class that allows you to set various parameters to the `UsersRequest` class based on which the users are fetched | ### Toggle Switch to hide or show the separators, and user presence. | Name | Type | Description | | -------------------- | ------- | --------------------------------------------------------------------------------------------------------- | | hideError | boolean | When set to true, hides the error messages displayed within the component | | hideSeparator | boolean | When set to true, hides the separator between the individual elements in the list. | | disableUsersPresence | boolean | When set to true, Users will not be able to see whether a particular user is currently online or offline. | ### activeUser This refers to a user who is actively engaged. | Name | Type | Description | | ---------- | -------------- | ----------------------------- | | activeUser | CometChat.User | User who is currently active. | ### selectionMode Allows user to choose individual or multiple items. | Name | Type | Description | | ------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------ | | selectionMode | [SelectionMode](/web-shared/selectionmode) | Allows user to select individual or multiple items for applying specific operations. | | onSelect | Function as PropType\<(users:CometChat.User\[]) => void> | Method invoked which returns the selected users. | ### Custom view UI component created and customised by the developer to meet your design or functional requirements. | Name | Type | Description | | ------------ | --------------------------------------------------------- | ----------------------------------------------------------------------------------------- | | subtitleView | Function as PropType\<(user: CometChat.User) => ViewType> | User-defined component to customise the secondary text shown in the default user profile. | ### Menu UI component created and customised by the developer to meet your design or functional requirements representing the button actions in the header section. | Name | Type | Description | | ---- | ---- | -------------------------------------------------------------------------------------- | | menu | view | User-defined component to showcase options related to the users in the header section. | ### Actions This includes action buttons or icons that allow users to perform common actions or tasks, such as muting the notification etc. | Name | Type | Description | | ------- | ------------------------------------------------------------------ | -------------------------------------------------------------- | | options | Function as PropType\<(user:CometChat.User) => CometChatOption\[]> | User-defined actions which appears for each user on mouseover. | ### Function Callback Functions that can be invoked by the user in response to a specific event or condition. | Name | Type | Description | | ----------- | -------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | | onItemClick | Function as PropType\<(user:CometChat.User) => void> | Override the method that is invoked when user clicks on a particular user | | onError | Function as PropType\<(error: CometChat.CometChatException) => void> | Override the method that is invoked when an error is encountered within the details component | ### Style Styling properties and values of all the child components | Name | Type | Description | | -------------------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------ | | avatarStyle | [AvatarStyle](/web-elements/avatar#avatar-style) | Styling properties and values of the [Avatar](/web-elements/avatar) component | | statusIndicatorStyle | [StatusIndicator](/web-elements/status-indicator) | Styling properties and values of the [StatusIndicator](/web-elements/status-indicator) component | | listItemStyle | [ListItemStyle](/web-elements/list-item#listitemstyle) | Styling properties and values of the [ListItem](/web-elements/list-item) component | | usersStyle | [UsersStyle](/web-shared/usersstyle) | Styling properties and values of the [Users](/ui-kit/vue/users) component | ## Usage CometChatUsers can be launched by adding the following code snippet. ```js theme={null} const getSubtitleView = (user:CometChat.User) => { return { html: `

${user.getUid()}

`, }; }; const getEmptyStateView = () => { return { html: "

CustomEmptyView

", }; }; const getLoadingStateView = () => { return { componentName: "CustomLoadingViewComponent", }; }; const getErrorStateView = () => { return { componentName: "CustomErrorViewComponent", }; }; let emptyStateText = "users not found"; let errorStateText = "somet thing went wrong"; let DeleteIcon = "./assets/DeleteIcon.svg"; function options(user: CometChat.User) { return [ new CometChatOption({ id: "id", title: "Delete user", iconURL: DeleteIcon, iconTint: "blue", onClick: () => //do something, }), ]; } ``` ***