π΄ 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;
'React > Hook' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
[ Hook ] useScroll (0) | 2022.08.10 |
---|---|
[ Hook ] usePreventLeave (0) | 2022.08.10 |
[ Hook ] useNotification (0) | 2022.08.10 |
[ Hook ] useHover (0) | 2022.08.10 |
[ Hook ] useBeforeLeave (0) | 2022.08.10 |