Learn more about Mintlify
Enter your email to receive updates about new features and product releases.
Track whether an element is currently hovered
useHover tracks whether a referenced element is currently hovered by the pointer.
import { useHover } from '@kuzenbo/hooks';
function Demo() {
const { hovered, ref } = useHover<HTMLDivElement>();
return (
<div
ref={ref}
style={{
padding: 40,
background: hovered ? 'orange' : 'cyan',
}}
>
{hovered ? 'Hovered' : 'Not hovered'}
</div>
);
}
true when the element is currently being hovered, false otherwise.import { useHover } from '@kuzenbo/hooks';
function Card() {
const { hovered, ref } = useHover();
return (
<div
ref={ref}
className={hovered ? 'card-hovered' : 'card'}
>
<h3>Card Title</h3>
<p>Card content</p>
</div>
);
}
import { useHover } from '@kuzenbo/hooks';
function Demo() {
const { hovered, ref } = useHover<HTMLButtonElement>();
return (
<button ref={ref}>
{hovered ? 'Release to click' : 'Hover me'}
</button>
);
}