Forem

Rails Designer
Rails Designer

Posted on β€’ Originally published at railsdesigner.com

1

Announcing Stimulus FX: Custom Action Options for Stimulus

This article was originally published on Rails Designer


Recently I published an article about custom action options in Stimulus. It explains how you can use these to build more advanced actions with custom JavaScript. It's pretty neat, check out the article if you want to know more!

While writing the article and reviewing my own apps for examples, I noticed I frequently repeated the same custom action options. As a developer, that kind of repetition started to make me uneasy. So I decided what every sane developer would decide: package them up! πŸ“¦ 😬

So here is: Stimulus FX. It's also on GitHub and NPM.

Usage is simple. After adding the package using your favorite tool, all you need is:

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

// Or import specific actions
import { whenOutside } from "stimulus-fx/actions";
application.registerActionOption("whenOutside", whenOutside);
Enter fullscreen mode Exit fullscreen mode

Then, for the whenOutside option, in your HTML you can use it like this:

<div data-controller="dropdown">
  <ul data-dropdown-target="menu" data-action="click@window->dropdown#hide:whenOutside">
  </ul>
</div>
Enter fullscreen mode Exit fullscreen mode

Stimulus FX has currently a cute 4 action options, but I plan to add more soon! It is also OSS, so please help me improve it! ❀️

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up