fix: better hover use-effect
This commit is contained in:
parent
3c6469f388
commit
4efc0fbd3e
1 changed files with 8 additions and 8 deletions
|
@ -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]);
|
||||
|
|
Loading…
Reference in a new issue