Stimulus Fx

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

Install

npm

npm install stimulus-fx

yarn

yarn add stimulus-fx

importmap-rails

./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);

// Or like this
import { whenOutside } from "stimulus-fx/actions/whenOutside";
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.

Release

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

License

stimulus-fx is released under the MIT License.