[ Hook ] useBeforeLeave

🔴  Introduction

⚪  마우스가 브라우저 창의 바깥으로 벗어났을 때, 파라미터로 받은 onLeave 함수를 실행시키는 hook

 

🟠  Hook

 

import { useEffect } from "react";

export const useBeforeLeave = (onLeave) => {
    const handle = (event) => {
        const { clientY } = event;
        if (clientY <= 0) {
            onLeave(); // 마우스가 창의 위쪽으로 벗어났을 때
        }
    };

    useEffect(() => {
        if (typeof onLeave !== "function") {
            return;
        } else {
            document.addEventListener("mouseleave", handle);
        }
        return () => document.removeEventListener("mouseleave", handle);
    }, []);
};

 

🟡  Usage

 

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

function App() {
    const begForLife = () => console.log("Please don't leave browser");
    useBeforeLeave(begForLife);
    return (
        <div className="App">
            <div>Hi</div>
        </div>
    );
}

export default App;