Integrate the [hoverintent library](https://www.npmjs.com/package/hoverintent) into React hooks
npm install use-hoverintentIntegrate the hoverintent library into React hooks
Rather than firing hoverin and hoverout events immediately, hoverintent applies heuristics to only fire when a user intends to hover over an element.
This is often useful when building multiple nested lists as sibling elements. Often, when trying to scroll from the root of an item into its children, the mouse passes over the root of an adjacent item. Natively, the DOM will instantly fire the hoverout event on the current item. Similarly, the adjacent item would fire the hoverin event, which does not reflect the user's intent. These events are intercepted by hoverintent and only fired by an element if the user wants them to.
``tsx
const firstRef = useHoverIntent
hoverIn: () => {console.log("entering first element")},
hoverOut: () => {console.log("exiting first element")},
opts: {
interval: 1000
}
});
const secondRef = useHoverIntent
hoverIn: () => {console.log("entering second element")},
hoverOut: () => {console.log("exiting second element")},
});
return (
Developing
1.
1. # this builds the source code
1. cd example/; npm i; npm start;` # this starts the sample app to demonstrate the behavior of the code