1.0.0 • Published 3 years ago
@tbl4ero/usehover v1.0.0
A React hook for simulating a CSS-style hover event on an element
Usage
npm i @tbl4ero/useHover
import React from 'react';
import useHover from '@tbl4ero/useHover';
const HoveredElement = () => {
const { isHovered, hoverOptions, cursorPos } = useHover(/* options */);
return (
<>
{isHovered && <h1>I'm displayed only when hovering the div!</h1> }
<div {...hoverOptions}>Hover me!</div>
</>
);
}API
useHover
Options
| parameter | type | description | |
|---|---|---|---|
| trackCursor? | boolean | specifies whether the hook should return an object with the current x and y positions of the mouse cursor relative to the element | |
Values
| value | type | description | |
|---|---|---|---|
| isHovered | boolean | a boolean value showing whether the element given the hover options is hovered or not | |
| hoverOptions | {} | an object with callbacks for handling the react synthetic events | |
| cursorPos | { x: number, y: number } | the current x and y positions of the mouse cursor relative to the element |
1.0.0
3 years ago