Block/Unblock Users - CometChat Docs

AI Integration Quick Reference

Field	Value
Package	`@cometchat/chat-uikit-react`
Key components	`CometChatMessages` — uses `CometChat.blockUsers()` / `CometChat.unblockUsers()` SDK methods
Init	`CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")`
Events	`CometChatUserEvents.ccUserBlocked`, `CometChatUserEvents.ccUserUnblocked`
UI helpers	`CometChatConfirmDialog`, `CometChatToast`
Sample app	GitHub
Related	All Guides

Block/Unblock lets users prevent specific users from sending them messages. When blocked, the message composer is hidden and replaced with an unblock prompt. Before starting, complete the Getting Started guide for your framework.

Components

Component / Class	Role
`CometChat.blockUsers()`	SDK method to block specific users
`CometChat.unblockUsers()`	SDK method to unblock previously blocked users
`CometChatUserEvents.ccUserBlocked`	Event fired when a user is blocked
`CometChatUserEvents.ccUserUnblocked`	Event fired when a user is unblocked
`CometChatConfirmDialog`	Confirmation dialog for block/unblock actions

Integration Steps

1. Block User

Call CometChat.blockUsers() with the target UID. On success, update the local user object with setBlockedByMe(true) and emit ccUserBlocked so all subscribed components (like the composer) react to the change. File: CometChatHome.tsx

const onBlockUserClicked: () => Promise<void> = () => {
    let UID = user.getUid();
    return new Promise(async (resolve, reject) => {
        CometChat.blockUsers([UID]).then(
            list => {
                user.setBlockedByMe(true);
                CometChatUserEvents.ccUserBlocked.next(user);
                toastTextRef.current = getLocalizedString("blocked_successfully");
                setShowToast(true);
                return resolve();
            }, error => {
                console.log("Blocking user fails with error", error);
                return reject();
            }
        )
    })
}

2. Unblock User

Call CometChat.unblockUsers() with the target UID. On success, reset the action items back to “Block” (instead of “Unblock”), update the local user object, and emit ccUserUnblocked to restore the composer. File: CometChatHome.tsx

const onUnblockUserClicked = () => {
    let UID = user.getUid();
    CometChat.unblockUsers([UID]).then(
        list => {
            setActionItems([{
                "name": getLocalizedString("user_details_block"),
                "icon": blockIcon,
                "id": "block_unblock_user"
            }, {
                "name": getLocalizedString("delete_chat"),
                "icon": deleteIcon,
                "id": "delete_chat"
            }]);
            user.setBlockedByMe(false);
            CometChatUserEvents.ccUserUnblocked.next(user);
        }, error => {
            console.log("Unblocking user fails with error", error);
        }
    );
}

3. Confirmation Dialog

Show a confirmation dialog before blocking. This prevents accidental blocks. The dialog uses CometChatConfirmDialog with localized title, message, and button text. File: CometChatHome.tsx

const getBlockUserConfirmationDialogView = () => {
    return <>
        <div className="cometchat-block-user-dialog__backdrop">
            <CometChatConfirmDialog
                title={getLocalizedString("block_contact")}
                messageText={getLocalizedString("confirm_block_contact")}
                confirmButtonText={getLocalizedString("user_details_block")}
                onCancelClick={() => {
                    setShowBlockUserDialog(!showBlockUserDialog);
                }}
                onSubmitClick={onBlockUserClicked} />
        </div>
    </>
}

4. Composer Blocked State

File: CometChatMessages.tsx When a user is blocked, the composer is replaced with an unblock prompt:

{showComposerState ? (
    <div className="cometchat-composer-wrapper">
        <CometChatMessageComposer
            user={user}
            group={group}
        />
    </div>
) : (
    <div className="message-composer-blocked" onClick={() => {
        if (user) {
            CometChat.unblockUsers([user?.getUid()]).then(() => {
                user.setBlockedByMe(false);
                CometChatUserEvents.ccUserUnblocked.next(user);
            })
        }
    }}>
        <div className="message-composer-blocked__text">
            {getLocalizedString("cannot_send_to_blocked_user")} 
            <a>{getLocalizedString("click_to_unblock")}</a>
        </div>
    </div>
)}

5. Event Listeners

File: CometChatHome.tsx Subscribe to block/unblock events to update the UI in real time:

const ccUserBlocked = CometChatUserEvents.ccUserBlocked.subscribe(user => {
    if (user.getBlockedByMe()) {
        setShowComposer(false);
    }
    updateUserAfterBlockUnblock(user);
});

const ccUserUnblocked = CometChatUserEvents.ccUserUnblocked.subscribe(user => {
    if (!user.getBlockedByMe()) {
        setShowComposer(true);
    }
    updateUserAfterBlockUnblock(user);
});

Feature Matrix

Feature	Component / Method	File
Block user	`CometChat.blockUsers([UID])`	CometChatHome.tsx
Unblock user	`CometChat.unblockUsers([UID])`	CometChatHome.tsx
Check blocked status	`user.getBlockedByMe()`	CometChatMessages.tsx
Block confirmation	`CometChatConfirmDialog`	CometChatHome.tsx
Blocked composer state	`message-composer-blocked`	CometChatMessages.tsx
Block events	`ccUserBlocked.subscribe()`	CometChatHome.tsx
Unblock events	`ccUserUnblocked.subscribe()`	CometChatHome.tsx
Update user state	`user.setBlockedByMe(boolean)`	CometChatHome.tsx

Next Steps

Users

Display and manage user lists.

Message Composer

Customize the message input component.

All Guides

Browse all feature and formatter guides.

Sample App

Full working sample application on GitHub.

​Components

​Integration Steps

​1. Block User

​2. Unblock User

​3. Confirmation Dialog

​4. Composer Blocked State

​5. Event Listeners

​Feature Matrix

​Next Steps