ConjureUI
Get StartedDocumentation

Confirm Modal


component.tsx

import { useConfirmModal, ModalAction } from "@/components/ConfirmModal";

export default function Page() {
    const _useConfirmModal = useConfirmModal();

    const openDeleteConfirm = async () => {
        const objectName = "objectName";
        const userResponse = await _useConfirmModal.openDeleteConfirmation(
            `Delete "${objectName}"?`
        );

        if (userResponse.action === ModalAction.DELETE) {
            // Add delete logic
        }
    };

    return (
        <button onClick={openDeleteConfirm}>
            Show Delete Confirm
        </button>
    );
}



component.tsx

import { useConfirmModal, ModalAction } from "@/components/ConfirmModal";

export default function Page() {
    const _useConfirmModal = useConfirmModal();

    const openYesNoCancelModal = async () =>
    {
        const userResponse = await _useConfirmModal.openYesNoCancelModal(`Any text you want...`);

        switch (userResponse.action)
        {
            case ModalAction.YES:
                // Add logic when yes
                break;
            case ModalAction.NO:
                // Add logic when no
                break;
            case ModalAction.CANCEL:
                // Add logic when cancel
                break;
            default:
                break;
        }
    }

    return (
        <button onClick={openYesNoCancelModal}>
            Show Yes-No-Cancel Modal
        </button>
    );
}