[ Hook ] useConfirm

🔴  Introduction

⚪  메시지와 확인할 시 함수, 취소할 시 함수를 인자로 넣어 보내면 이에 해당하는 Confirm 모달 창을 띄워주는 hook

 

🟠  Hook

 

export const useConfirm = (message = "", onConfirm, onCancel) => {
    if (!onConfirm || typeof onConfirm !== "function") {
        return;
    }
    if (onCancel && typeof onCancel !== "function") {
        return;
    }
    const confirmAction = () => {
        if (window.confirm(message)) {
            onConfirm();
        } else {
            onCancel();
        }
    };
    return confirmAction;
};

 

🟡  Usage

 

import { useConfirm } from "./hooks/useConfirm";

function App() {
    const onConfirm = () => console.log("🔔 Yes Button Clicked!");
    const onCancel = () => console.log("🔔 No Button Clicked!");
    const toggleConfirm = useConfirm("⚠️ Are you sure?", onConfirm, onCancel);
    return (
        <div className="App">
            <button onClick={toggleConfirm}>Check Confirm</button>
        </div>
    );
}

export default App;