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
details
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
details
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>
  );
}