Pass down setState to useHover Element

[mthaak]

Is your feature request related to a problem? Please describe. I'd like the element that's being rendered by useHover to control the hovering state.

In some cases, my mouse can leave the element without triggering a onmouseleave event.

For example, I have a dropdown that appears on hover. When I select an item from that dropdown, the dropdown disappears but my mouse is outside the original element, while no onmouseleave event is triggered.

Describe the solution you'd like Pass down setState to the element in useHover: In https://github.com/streamich/react-use/blob/master/src/useHover.ts change on line 6:

export type Element = ((state: boolean, setState: (state: boolean) => void) => React.ReactElement<any>) | React.ReactElement<any>;

and on line 21:

element = element(state, setState);

Now I can do:

export const MyComponent: React.FC = () => {
  return useHover((hovering, setHovering) => {
    return (
      <div className={"wrapper"}>
        {hovering && (
          <Dropdown
            onChange={(selectedItem) => {
              setHovering(false);
            }}
          />
        )}
      </div>
    );
  })[0];
};

Or use setHovering any other way I'd like.

Describe alternatives you've considered This looks like cleanest solution to me and I've seen it done this way in other libraries as well. There are no breaking changes and users can choose to use the passed down setState callable or not.

If you like this solution, I can create a PR.

[omwagh28]

Assign me this issue