Block/Unblock Users

Implement block and unblock user functionality in CometChat React UI Kit with composer state management.

AI Agent Component Spec

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.