๐ด 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;
'React > Hook' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[ Hook ] useScroll (0) | 2022.08.10 |
---|---|
[ Hook ] useNotification (0) | 2022.08.10 |
[ Hook ] useHover (0) | 2022.08.10 |
[ Hook ] useConfirm (0) | 2022.08.10 |
[ Hook ] useBeforeLeave (0) | 2022.08.10 |