LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Packages Projects Releases 238 Wiki Activity

fix: better hover use-effect

Browse source
This commit is contained in:
Mr. X 2020-04-23 22:01:42 +05:30 committed by Sean Yesmunt
parent 3c6469f388
commit 4efc0fbd3e
1 changed files with 8 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
ui/effects/use-hover.js
View file

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