Stimulus FX

Install

npm

npm install stimulus-fx

yarn

yarn add stimulus-fx

importmaps

./bin/importmap pin stimulus-fx

Usage

// Import all custom actions
import { registerActionOptions } from "stimulus-fx";
registerActionOptions(application);

// Or only import specific custom 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 (use data-throttled-wait='2000' to specify the interval)
• withConfirm
• withKey (use data-key='meta' to specifiy the key, or data-key='ctrl,shift' for multiple keys)
• withMetaKey; deprecated use withKey instead
• whenOutside

Enhanced Stimulus debugging

Stimulus FX offers an experimental enhanced debugging feature that goes beyond Stimulus’ standard debug = true option. Not only does it show the same details as the default debug option, but it also displays your controller’s targets and values.

Here’s how to set it up:

// app/javascript/controllers/application.js
+import { enableDebug } from "stimulus-fx"

-const application = Application.start()
+const application = enableDebug(Application.start())

You can enable debugging for specific controllers:

export default class extends Controller {
+  static debug = true
+
}

For the best experience, it’s recommended to turn off Stimulus’ default debug feature when using this enhanced version.