{"id":23937213,"url":"https://github.com/Rails-Designer/stimulus-fx","last_synced_at":"2025-09-11T19:31:52.903Z","repository":{"id":265919120,"uuid":"896640103","full_name":"Rails-Designer/stimulus-fx","owner":"Rails-Designer","description":"Collection of useful FX for Stimulus","archived":false,"fork":false,"pushed_at":"2025-08-22T04:29:59.000Z","size":318,"stargazers_count":31,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-22T05:24:21.423Z","etag":null,"topics":["hotwire","stimulus","stimulusjs"],"latest_commit_sha":null,"homepage":"https://railsdesigner.com/stimulus-fx/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Rails-Designer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["Rails-Designer"]}},"created_at":"2024-11-30T22:42:02.000Z","updated_at":"2025-08-22T04:25:03.000Z","dependencies_parsed_at":null,"dependency_job_id":"0a3781d9-fa8d-485a-b5bb-f1730f6388d7","html_url":"https://github.com/Rails-Designer/stimulus-fx","commit_stats":null,"previous_names":["rails-designer/stimulus-fx"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/Rails-Designer/stimulus-fx","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rails-Designer%2Fstimulus-fx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rails-Designer%2Fstimulus-fx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rails-Designer%2Fstimulus-fx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rails-Designer%2Fstimulus-fx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Rails-Designer","download_url":"https://codeload.github.com/Rails-Designer/stimulus-fx/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rails-Designer%2Fstimulus-fx/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274694389,"owners_count":25332673,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-11T02:00:13.660Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hotwire","stimulus","stimulusjs"],"created_at":"2025-01-06T02:01:16.872Z","updated_at":"2025-09-11T19:31:52.895Z","avatar_url":"https://github.com/Rails-Designer.png","language":"JavaScript","funding_links":["https://github.com/sponsors/Rails-Designer"],"categories":["JavaScript"],"sub_categories":[],"readme":"# Stimulus Fx\n\nCollection 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.\n\n\n**Sponsored By [Rails Designer](https://railsdesigner.com/)**\n\n\u003ca href=\"https://railsdesigner.com/\" target=\"_blank\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://raw.githubusercontent.com/Rails-Designer/rails_icons/HEAD/.github/logo-dark.svg\"\u003e\n    \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://raw.githubusercontent.com/Rails-Designer/rails_icons/HEAD/.github/logo-light.svg\"\u003e\n    \u003cimg alt=\"Rails Designer\" src=\"https://raw.githubusercontent.com/Rails-Designer/rails_icons/HEAD/.github/logo-light.svg\" width=\"240\" style=\"max-width: 100%;\"\u003e\n  \u003c/picture\u003e\n\u003c/a\u003e\n\nWant to make JavaScript your second-favorite language? 👉 [JavaScript for Rails Developers](https://javascriptforrails.com/)\n\n\n## Install\n\n**npm**\n```bash\nnpm install stimulus-fx\n```\n\n**yarn**\n```bash\nyarn add stimulus-fx\n```\n\n**importmap-rails**\n```bash\n./bin/importmap pin stimulus-fx\n```\n\n\n## Usage\n\n```javascript\n// Import all custom actions\nimport { registerActionOptions } from \"stimulus-fx\";\nregisterActionOptions(application);\n\n// Or only import specific custom actions\nimport { whenOutside } from \"stimulus-fx/actions\";\napplication.registerActionOption(\"whenOutside\", whenOutside);\n\n// Or like this\nimport { whenOutside } from \"stimulus-fx/actions/whenOutside\";\napplication.registerActionOption(\"whenOutside\", whenOutside);\n```\n\nIn your HTML:\n```html\n\u003cdiv data-controller=\"dropdown\"\u003e\n  \u003cbutton data-action=\"dropdown#show:stop\"\u003eShow\u003c/button\u003e\n\n  \u003cul data-dropdown-target=\"menu\" data-action=\"click@window-\u003edropdown#hide:whenOutside\"\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e\n```\n\n\n## Available action options\n\n- throttled (use `data-throttled-wait='2000'` to specify the interval)\n- withConfirm\n- withKey (use `data-key='meta'` to specifiy the key, or `data-key='ctrl,shift'` for multiple keys)\n- withMetaKey; deprecated use `withKey` instead\n- whenOutside\n\n\n## Enhanced Stimulus debugging\n\nStimulus 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.\n\n![Preview of enhanced debugging with Stimulus](https://raw.githubusercontent.com/Rails-Designer/stimulus-fx/HEAD/.github/enhanced-debugging.jpg)\n\nHere's how to set it up:\n\n```diff\n// app/javascript/controllers/application.js\n+import { enableDebug } from \"stimulus-fx\"\n\n-const application = Application.start()\n+const application = enableDebug(Application.start())\n```\n\nYou can enable debugging for specific controllers:\n\n```diff\n export default class extends Controller {\n+  static debug = true\n+\n}\n```\n\nFor the best experience, it's recommended to turn off Stimulus' default debug feature when using this enhanced version.\n\n\n## Release\n\nBecause I always forget how to do this and don't feel like pulling a third-party dependency for releasing.\n\n```bash\nnpm version patch # or minor, or major\nnpm publish\ngit push\ngit push --tags\n```\n\n\n## License\n\nstimulus-fx is released under the [MIT License](https://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRails-Designer%2Fstimulus-fx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FRails-Designer%2Fstimulus-fx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRails-Designer%2Fstimulus-fx/lists"}