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

importmaps

./bin/importmap pin stimulus-fx

Usage

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

// Or import specific 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>

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

License

stimulus-fx is released under the MIT License.