Skip to content

Files

Latest commit

f67740f Β· Oct 30, 2018

History

History
40 lines (30 loc) Β· 878 Bytes

useHover.md

File metadata and controls

40 lines (30 loc) Β· 878 Bytes

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