Event Handling
useOnLongHover
A hook to detect long hover on an element.
import { useOnLongHover } from "rooks";
export default function App() {
const handleLongHover = () => {
console.log("Long hover detected");
};
const longHoverRef = useOnLongHover(handleLongHover);
return (
<>
<p>Hover on the button for 500ms to trigger a console.log statement</p>
<button ref={longHoverRef}>Long hover me</button>
</>
);
}
import { useOnLongHover } from "rooks";
export default function App() {
const handleLongHover = () => {
console.log("Long hover detected");
};
const handleMouseLeave = () => {
console.log("Mouse left before long hover completed");
};
const longHoverRef = useOnLongHover(handleLongHover, {
duration: 1000,
});
return (
<>
<p>Hover on the button for 1000ms to trigger a console.log statement</p>
<button ref={longHoverRef}>Long hover me</button>
</>
);
}
| Argument value | Type | Description | Default |
|---|
| callback | Function | Callback function to be called when long hover is detected | undefined |
| options | Object | See table below | undefined |
| Options value | Type | Description | Default |
|---|
| duration | Number | The duration (in ms) after which long hover is detected | 500 |
| Return value | Type | Description | Default |
|---|
| ref | Callback Ref | A ref that can be used on the element you want to detect long hover on | undefined |