[ Hook ] useHover

🔴  Introduction

⚪  컴포넌트에 Hover 이벤트 발생시 전달한 함수를 실행시켜주는 Hook

 

🟠  Hook

 

import { useEffect, useRef } from "react";

export const useHover = (onHover) => {
    const element = useRef();
    useEffect(() => {
        if (typeof onHover !== "function") {
            return;
        }
        if (element.current) {
            element.current.addEventListener("mouseenter", onHover);
        }
        return () => {
            if (element.current) {
                element.current.removeEventListener("mouseenter", onHover);
            }
        };
    }, []);
    return element;
};

 

🟡  Usage

 

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

function App() {
    const sayHello = () => console.log("say hello");
    const title = useHover(sayHello);
    return (
        <div className="App">
            <h1 ref={title}>Hi</h1>
        </div>
    );
}

export default App;