useHover.md

useHover and useHoverDirty

React UI sensor hooks that track if some element is being hovered by a mouse.

• useHover accepts a React element or a function that returns one, useHoverDirty accepts React ref.
• useHover sets react onMouseEnter and onMouseLeave events, useHoverDirty sets DOM onmouseover and onmouseout events.

Usage

import {useHover} from 'react-use';

const Demo = () => {
  const element = (hovered) =>
    <div>
      Hover me! {hovered && 'Thanks!'}
    </div>;
  const [hoverable, hovered] = useHover(element);

  return (
    <div>
      {hoverable}
      <div>{hovered ? 'HOVERED' : ''}</div>
    </div>
  );
};

Reference

const [newReactElement, isHovering] = useHover(reactElement);
const [newReactElement, isHovering] = useHover((isHovering) => reactElement);
const isHovering = useHoverDirty(ref);