Collection of useful action options for Stimulus.js controllers. See this article to learn how custom action options in Stimulus work.

Sponsored By Rails Designer

Want to make JavaScript your second-favorite language? 👉 JavaScript for Rails Developers

npm

npm install stimulus-fx

yarn

yarn add stimulus-fx

importmap-rails

./bin/importmap pin stimulus-fx

// 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>

• 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

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.

Because I always forget how to do this and don't feel like pulling a third-party dependency for releasing.

npm version patch # or minor, or major
npm publish
git push
git push --tags

stimulus-fx is released under the MIT License.