[ Hook ] usePreventLeave

🔴  Introduction

⚪  현재 페이지를 종료하려고 할 때, 경고 메시지를 띄울지 말지를 결정하는 함수를 리턴해주는 Hook

 

🟠  Hook

 

export const usePreventLeave = () => {
    const listener = (event) => {
        event.preventDefault();
        event.returnValue = "";
    };
    const enablePrevent = () => window.addEventListener("beforeunload", listener);
    const disablePrevent = () => window.removeEventListener("beforeunload", listener);
    return [enablePrevent, disablePrevent];
};

 

🟡  Usage

 

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

function App() {
    const [enablePrevent, disablePrevent] = usePreventLeave();
    return (
        <div className="App">
            <button onClick={enablePrevent}>Protect</button>
            <button onClick={disablePrevent}>Unprotect</button>
        </div>
    );
}

export default App;