lbry-desktop/ui/effects/use-hover.js
2019-11-11 13:27:29 -05:00

23 lines
633 B
JavaScript

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