use-hover.md

useHover

Adds 2 new behaviors to your Stimulus controller : mouseEnter and mouseLeave.

Reference

useHover(controller, options = {})

controller : a Stimulus Controller (usually 'this')

options :

Option	Description	Default value
element	The element which the controller will listen for hover on	The controller element

Usage

Composing

import { Controller } from '@hotwired/stimulus'
import { useHover } from 'stimulus-use'

export default class extends Controller {

  connect() {
    useHover(this, { element: this.element });
  }

  mouseEnter() {
    // ...
  }

  mouseLeave() {
    // ...
  }
}

Extending a controller

import { HoverController } from 'stimulus-use'

export default class extends HoverController {

  mouseEnter() {
    // ...
  }

  mouseLeave() {
    // ...
  }
}

Callbacks

This module adds two new callbacks mouseEnter and mouseLeave that you may use to triggers stimulus actions

For example to add an 'active' class when the user moves the mouse over an element:

import { Controller } from '@hotwired/stimulus'
import { useHover } from 'stimulus-use'

export default class extends Controller {
  
  connect() {
    useHover(this, { element: this.element });
  }
  
  mouseEnter() {
    // ...
    this.element.classList.add('active')
  }

  mouseLeave() {
    // ...
    this.element.classList.remove('active')
  }
}