Implement a useHover hook that tracks whether an element is being hovered.

exportdefaultfunction Component() {
const [ref, hovered] = useHover();
return (
    <div>
      <div ref={ref}>{hovered ? 'Hovered' : 'Not hovered'}</div>
    </div>
  );
}

Arguments

Nothing.

Returns

The hook returns an array with two elements:

1. A ref callback function that will be attached to the ref prop of the element to track. This has the type (element: T | null) => void, where T extends Element
2. A boolean that indicates whether the element is currently being hovered

Editorial