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

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

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.