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
• whenOutside
• withMetaKey
• withConfirm

License

stimulus-fx is released under the MIT License.