https://github.com/Rails-Designer/stimulus-fx
Collection of useful FX for Stimulus
https://github.com/Rails-Designer/stimulus-fx
hotwire stimulus stimulusjs
Last synced: 26 days ago
JSON representation
Collection of useful FX for Stimulus
- Host: GitHub
- URL: https://github.com/Rails-Designer/stimulus-fx
- Owner: Rails-Designer
- License: mit
- Created: 2024-11-30T22:42:02.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-08-22T04:29:59.000Z (about 2 months ago)
- Last Synced: 2025-08-22T05:24:21.423Z (about 2 months ago)
- Topics: hotwire, stimulus, stimulusjs
- Language: JavaScript
- Homepage: https://railsdesigner.com/stimulus-fx/
- Size: 311 KB
- Stars: 31
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.txt
Awesome Lists containing this project
README
# Stimulus Fx
Collection of useful action options for Stimulus.js controllers. See this article to learn how [custom action options in Stimulus](https://railsdesigner.com/stimulus-custom-action-options/) work.
**Sponsored By [Rails Designer](https://railsdesigner.com/)**
Want to make JavaScript your second-favorite language? 👉 [JavaScript for Rails Developers](https://javascriptforrails.com/)
## Install
**npm**
```bash
npm install stimulus-fx
```
**yarn**
```bash
yarn add stimulus-fx
```
**importmap-rails**
```bash
./bin/importmap pin stimulus-fx
```
## Usage
```javascript
// 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:
```html
Show
```
## 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
## Enhanced Stimulus debugging
Stimulus FX offers an experimental enhanced debugging feature that goes beyond Stimulus' standard `debug = true` option. Not only does it show the same details as the default debug option, but it also displays your controller's targets and values.
Here's how to set it up:
```diff
// app/javascript/controllers/application.js
+import { enableDebug } from "stimulus-fx"
-const application = Application.start()
+const application = enableDebug(Application.start())
```
You can enable debugging for specific controllers:
```diff
export default class extends Controller {
+ static debug = true
+
}
```
For the best experience, it's recommended to turn off Stimulus' default debug feature when using this enhanced version.
## Release
Because I always forget how to do this and don't feel like pulling a third-party dependency for releasing.
```bash
npm version patch # or minor, or major
npm publish
git push
git push --tags
```
## License
stimulus-fx is released under the [MIT License](https://opensource.org/licenses/MIT).