streamich / react-use

React Hooks — 👍
http://streamich.github.io/react-use
The Unlicense
41.8k stars 3.15k forks source link

Reason for useHoverDirty using mouseout and not mouseleave #2003

Open arianra opened 3 years ago

arianra commented 3 years ago

Is your feature request related to a problem? Please describe. I noticed there is a difference in using useHover and useHoverDirty, the former uses the onMouseLeave and the latter uses mouseout. I was wondering if there is a specific reason for this discrepancy?

Describe the solution you'd like I would preferably be able to choose whether to use mouseout or mouseleave. However I find that mouseleave is a more common use-case for my purposes, so if possible I would prefer that as the default.

Describe alternatives you've considered I find the useHover pattern a little unconventional for my use, and although useHoverDirty's usage is, well, dirty, it doesn't force me to break the structure of my component just to have a simple useHover implemented.

Preferably I would want an API as below, but I'm curious if this pattern is less preferred by others:

const Demo = () => {
    const onMouseEnter = (event) => { alert('you are hovering!') }
    const onMouseLeave = (event) => { alert('you stopped hovering!') }
    const [ hoverProps, isHovering ] = useHover(onMouseEnter, onMouseLeave)

    return (
       <div {...hoverProps}>
            <p>{ !isHovering ? 'Hover me!' :  `Don't Hover me!` } </p>
       </div>
    )
}

I could put up a PR for the first issue, if that helps.

selrond commented 3 years ago

Just got bitten by this, I've assumed the underlying event implementation is the same, not noticing the difference. Without documentation, this difference certainly looks weird