> ## 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.

# Block/Unblock User

Enable users to block and unblock others directly within chat using CometChat’s React UI Kit, preventing unwanted communication and giving users more control.

## Overview

When a user is blocked, they are prevented from sending messages to the person who blocked them. CometChat UIKit manages most of the related functionality automatically:

* **Composer Disabled:** The message input area is not shown during conversations with blocked users.
* **Unblock Option:** A visible “Unblock” button allows users to lift the block.
* **Messaging Limitations:** Blocked users are restricted from initiating messages to the person who blocked them.

## Prerequisites

* CometChat `SDK v4.x` or later
* CometChat **App ID**, **Auth Key**, and **Region** configured and initialized.
* React project setup with CometChat UI Kit
* Toast/confirmation UI components (e.g., `CometChatConfirmDialog`)

## Components

| Component / Class             | Role                                          |
| ----------------------------- | --------------------------------------------- |
| `CometChatUserDetails`        | Displays user details and available actions   |
| `CometChatConfirmDialog`      | Renders confirmation prompts for block/delete |
| `CometChatUserEvents`         | Emits block/unblock events                    |
| `CometChatConversationEvents` | Emits conversation deletion event             |

## Integration Steps

### 1. Detect Block Status

Update UI when block state changes.

```tsx theme={null}
if (user) {
  CometChat.unblockUsers([user.getUid()]).then(() => {
    user?.setBlockedByMe(false);
    CometChatUserEvents.ccUserUnblocked.next(user as CometChat.User);
});
```

**File reference:**\
[`CometChatThreadedMessages.tsx`](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatDetails/CometChatThreadedMessages.tsx)

Ensures the composer and unblock UI reflect the current block state.

### 2. Hide Composer & Show Unblock UI

Define layout elements and their visibility toggles.

```tsx theme={null}
<CometChatConfirmDialog
  title={getLocalizedString('block_contact')}
  messageText={getLocalizedString('confirm_block_contact')}
  confirmButtonText={getLocalizedString('user_details_block')}
  onCancelClick={() => {
    setShowBlockUserDialog(!showBlockUserDialog);
  }}
  onSubmitClick={onBlockUserClicked}
/>
```

**File reference:**\
[`CometChatHome.tsx`](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)

Prepares the UI containers for dynamic show/hide operations.

### 3. User Blocking Configuration

Call the unblock API and observe status updates.

```tsx theme={null}
const ccUserBlocked = CometChatUserEvents.ccUserBlocked.subscribe((blockedUser) => {
  if (blockedUser.getBlockedByMe()) {
    setShowComposer(false);
  }
  updateUserAfterBlockUnblock(blockedUser);
});
const ccUserUnblocked = CometChatUserEvents.ccUserUnblocked.subscribe((unBlockedUser) => {
  if (!unBlockedUser.getBlockedByMe()) {
    setShowComposer(true);
  }
  updateUserAfterBlockUnblock(unBlockedUser);
});
```

**File reference:**\
[`CometChatHome.tsx`](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)

Executes unblock logic and updates LiveData to refresh UI.

## Error Handling & Blocked-User Handling

* Show toast feedback on success/failure
* Disable status and update UI for blocked users
* Properly catch and log deletion errors

## Summary / Feature Matrix

| Feature       | Component / Method                                    |
| ------------- | ----------------------------------------------------- |
| Block user    | `CometChat.blockUsers([UID])`                         |
| Unblock user  | `CometChat.unblockUsers([UID])`                       |
| Delete chat   | `CometChat.deleteConversation(UID, 'user')`           |
| Event updates | `CometChatUserEvents` / `CometChatConversationEvents` |

## Next Steps & Further Reading

<CardGroup>
  <Card title="React Sample App" icon="react" href="https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app">
    Explore this feature in the CometChat Sample App.
  </Card>

  <Card title="UI Kit Source Code" icon="code" href="https://github.com/cometchat/cometchat-uikit-react/tree/v6/src/CometChatUIKit">
    Access the complete UI Kit source code on GitHub.
  </Card>
</CardGroup>