Hover
Updated on September 20, 2024Source codeTests
createHover is a factory that returns Recognizeable effects for recognizing hover.
A hover starts with a mouseover event, and is denied by a mouseout event.
While the mouse is still over the target element, createHover continuously recognizes the gesture at a rate of 60fps. The gesture is recognized when the mouse has been over the element for a minimum duration, which is configurable.
Create hover
Call createHover with these parameters to create your mouseover and mouseout effects:
optionsmouseover and mouseout effects. See the Options section for more guidance.Options
minDuration0onOverundefinedA function that is called when the mouse is over the target element.
onOver receives the hover hook API as its only parameter.
onOutundefinedA function that is called when the mouse leaves the target.
onOut receives the hover hook API as its only parameter.
Hook API
The hook API is an object that is passed to the onOver and onOut options as their only parameter. It contains the following properties:
statusrecognized, denied, or recognizing.sequenceMetadata
Your created hover effects store data in the Recognizeable instance's metadata property.
Hover metadata includes all pointer metadata.
Using with Listenable
The easiest way to use createHover with Listenable is to use the Hover class, which is a very minimal subclass of Listenable that handles configuration for you.
Here's an example of how to use Hover to nicely combine createHover with Listenable:
import { Hover } from '@baleada/logic'
const hover = new Hover([hoverOptions])
hover.listen(() => {
console.log(hover.metadata.duration)
})
