Announcing Stimulus FX: Custom Action Options for Stimulus

This article was originally published on Rails Designer

Recently I published an article about custom action options in Stimulus. It explains how you can use these to build more advanced actions with custom JavaScript. It's pretty neat, check out the article if you want to know more!

While writing the article and reviewing my own apps for examples, I noticed I frequently repeated the same custom action options. As a developer, that kind of repetition started to make me uneasy. So I decided what every sane developer would decide: package them up! 📦 😬

So here is: Stimulus FX. It's also on GitHub and NPM.

Usage is simple. After adding the package using your favorite tool, all you need is:

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

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

Then, for the whenOutside option, in your HTML you can use it like this:

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

Stimulus FX has currently a cute 4 action options, but I plan to add more soon! It is also OSS, so please help me improve it! ❤️