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

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

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

• 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)
• whenOutside

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.