26 lines
730 B
JavaScript
26 lines
730 B
JavaScript
|
import React, { useEffect, useRef, useState } from "react";
|
||
|
|
||
|
function useHover() {
|
||
|
const [value, setValue] = useState(false);
|
||
|
const ref = useRef(null);
|
||
|
const handleMouseOver = () => setValue(true);
|
||
|
const handleMouseOut = () => setValue(false);
|
||
|
useEffect(
|
||
|
() => {
|
||
|
const node = ref.current;
|
||
|
if (node) {
|
||
|
node.addEventListener("mouseover", handleMouseOver);
|
||
|
node.addEventListener("mouseout", handleMouseOut);
|
||
|
return () => {
|
||
|
node.removeEventListener("mouseover", handleMouseOver);
|
||
|
node.removeEventListener("mouseout", handleMouseOut);
|
||
|
};
|
||
|
}
|
||
|
},
|
||
|
[ref.current] // Recall only if ref changes
|
||
|
);
|
||
|
return [ref, value];
|
||
|
}
|
||
|
|
||
|
export default useHover;
|