Stimulus FX

Collection of useful action options for Stimulus.js controllers.

Install

npm

npm install stimulus-fx

yarn

yarn add stimulus-fx

importmaps

./bin/importmap pin stimulus-fx

Usage

// app/javascript/controllers/application.js

// Import everything
import { registerActionOptions } from "stimulus-fx"
registerActionOptions(application)

// Or import specific actions
import { whenOutside } from "stimulus-fx/actions"
application.registerActionOption("whenOutside", whenOutside)

In your HTML:

<div data-controller="dropdown">
  <button data-action="dropdown#show:stop">Show</button>

  <ul data-dropdown-target="menu" data-action="click@window->dropdown#hide:whenOutside">
  </ul>
</div>

Available action options

  • throttled
  • whenOutside
  • withMetaKey
  • withConfirm