Appearance

Return to top
On this page

useHover

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

Reference 

useHover(controller, options = {})

controller : a Stimulus Controller (usually 'this')

options :

OptionDescription      Default value      
elementThe element which the controller will listen for hover onThe 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')
  }
}