Hook - useBeforeLeave

원종서·2021년 8월 25일
0

hook

목록 보기
7/11
import React, {useEffect, useRef, useState} from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const useVeforeLeave = (message) => {
    const handle = (e) => {
        const {clientY} = e;
        // 마우스가 나가기 번튼 쪽으로 갔을떄
        if (clientY <= 0) {
            alert(message);
        }
    };

    useEffect(() => {
        // 마운트 되면 addEvent
        document.addEventListener("mouseleave", handle);
        return () => {
            // 언마우트 되면 removeEvent
            document.removeEventListener("mouseleave", handle);
        };
    }, []);

    if (typeof onBefore !== "function") return;
};

const App = () => {
    const message = "Dont Leave";
    useVeforeLeave(message);

    return <div className="App"></div>;
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

0개의 댓글