fix: better hover use-effect

This commit is contained in:
Mr. X 2020-04-23 22:01:42 +05:30 committed by Sean Yesmunt
parent 3c6469f388
commit 4efc0fbd3e

View file

@ -3,18 +3,18 @@ import { useEffect, useState } from 'react';
export default function useHover(ref) {
const [isHovering, setIsHovering] = useState(false);
useEffect(() => {
function handleHover() {
setIsHovering(!isHovering);
}
const hoverFunc = () => setIsHovering(true);
const unHoverFunc = () => setIsHovering(false);
useEffect(() => {
const refElement = ref.current;
if (refElement) {
refElement.addEventListener('mouseenter', handleHover);
refElement.addEventListener('mouseleave', handleHover);
refElement.addEventListener('mouseenter', hoverFunc);
refElement.addEventListener('mouseleave', unHoverFunc);
return () => {
refElement.removeEventListener('mouseenter', handleHover);
refElement.removeEventListener('mouseleave', handleHover);
refElement.removeEventListener('mouseenter', hoverFunc);
refElement.removeEventListener('mouseleave', unHoverFunc);
};
}
}, [ref, isHovering]);