useHover
import { useHover } from 'react-laag';
When working with tooltips for instance, you sometimes want specific behavior regarding timing. If you show a tooltip immediately when the mouse enters the trigger element, the user may perceive the tooltip as annoying. That's why it's common to only show a tooltip after a certain time has passed while the user has been hovering over the trigger element. useHover
is a hook which helps you control this kind of behavior.
Type
(config?: UseHoverConfig): [boolean, HoverProps]
UseHoverConfig
delayEnter
number
Default
0
Amount of time in ms that should pass while hovering in order to show the layer.
delayLeave
number
Default
0
Amount of time in ms that should pass while user has left the element before the layer hides again .
hideOnScroll
boolean
Default
true
Determines whether the layer should hide when the user starts scrolling. Default is true.
HoverProps
onMouseEnter
(event: MouseEvent): void
onMouseLeave
(event: MouseEvent): void
Example
function UseHoverExample() {
const [show, hoverProps] = useHover({ delayEnter: 300, delayLeave: 200 });
return (
<ToggleLayer
isOpen={show}
renderLayer={({ layerProps }) =>
isOpen ? <Layer {...layerProps} /> : null
}
// rest of props...
>
{({ triggerRef }) => (
<div ref={triggerRef} {...hoverProps}>
hover me!
</div>
)}
</ToggleLayer>
);
}