StimulusReflex Cheat Sheet in April 2024

Last Updated: 20 April 2024

via Data Attributes

Trigger reflexes without writing any javascript with the data-reflex attribute.

<!-- index.html.erb -->
  data-count="<%= @count.to_i %>"
  >Increment <%= @count.to_i %></a
# counter_reflex.rb
class CounterReflex < StimulusReflex::Reflex
  def increment
    @count = element.dataset[:count].to_i + element.dataset[:step].to_i

from Stimulus.js Controller

Stimulus.js controllers registered with StimulusReflex can use the stimulate method to trigger reflexes

<!-- index.html.erb -->
<a href="#"
>Increment <%= @count %></a>
// counter_controller.js
import { Controller } from 'stimulus'
import StimulusReflex from 'stimulus_reflex'

export default class extends Controller {
  connect() {

  increment(event) {
    this.stimulate('Counter#increment', 1)
# counter_reflex.rb
class CounterReflex < StimulusReflex::Reflex
  def increment(step = 1)
    session[:count] = session[:count].to_i + step


Selector morphs

Instead of refreshing the entire page, you can specify a portion of the page to update with morph(selector, content)

<!-- show.html.erb -->
<header data-reflex="click->Example#change">
  <%= render partial: "path/to/foo", locals: {message: "Am I the medium or the massage?"} %>
<!-- _foo.html.erb -->
<div id="foo">
  <span class="spa"><%= message %></span>
# example_reflex.rb
class ExampleReflex < ApplicationReflex
  def change
    morph "#foo", "Your muscles... they are so tight."

Nothing morph

Use morph :nothing in reflexes that do something on the server without updating the client.

# example_reflex.rb
class ExampleReflex < ApplicationReflex
  def change
    morph :nothing


Server-side callbacks

Reflex classes can use the following callbacks. Full Docs

  • before_reflex
  • around_reflex
  • after_reflex

Client-side callbacks (generic)

StimulusReflex controllers automatically support five generic lifecycle callback methods.

  • beforeReflex(element, reflex, noop, reflexId) prior to sending a request over the web socket
  • reflexSuccess(element, reflex, noop, reflexId) after the server side Reflex succeeds and the DOM has been updated
  • reflexError(element, reflex, error, reflexId) whenever the server side Reflex raises an error
  • reflexHalted(element, reflex, noop, reflexId) reflex canceled with throw :abort in the before_reflex callback
  • afterReflex(element, reflex, noop, reflexId) after both success and error
  • finalizeReflex(element, reflex, noop, reflexId) after both success and error

Client-side callbacks (custom)

StimulusReflex controllers can define up to five custom lifecycle callback methods for each Reflex action. These methods use a naming convention based on the name of the Reflex. e.g. for the add_one reflex:

  • beforeAddOne(element, reflex, noop, reflexId)
  • addOneSuccess(element, reflex, noop, reflexId)
  • addOneError(element, reflex, error, reflexId)
  • addOneHalted(element, reflex, noop, reflexId)
  • afterAddOne(element, reflex, noop, reflexId)
  • finalizeAddOne(element, reflex, noop, reflexId)

Client-side events

If you need to know when a Reflex method is called, but you’re working outside of the Stimulus controller that initiated it, you can subscribe to receive DOM events

  • stimulus-reflex:before
  • stimulus-reflex:success
  • stimulus-reflex:error
  • stimulus-reflex:halted
  • stimulus-reflex:after

There are also events related to the StimulusReflex library setting up and connecting to ActionCable

  • stimulus-reflex:connected
  • stimulus-reflex:disconnected
  • stimulus-reflex:rejected
  • stimulus-reflex:ready

Helpful tips


If a Reflex is called on a form element - or a child of that form element - then the data for the whole form will be properly serialized and made available to the Reflex action method as the params accessor. Read more


stimulate() method returns a promise

  .then(() => this.doSomething())
  .catch(() => this.handleError())

Inheriting data-attributes from parent elements

You can use the data-reflex-dataset="combined" directive to scoop all data attributes up the DOM hierarchy and pass them as part of the Reflex payload.

<!-- new.html.erb -->
<div data-post-id="<%= %>">
  <div data-category-id="<%= %>">
    <button data-reflex="click->Comment#create" data-reflex-dataset="combined">Create</button>
# comment_reflex.rb
class CommentReflex < ApplicationReflex
  def create
    puts element.dataset["post-id"]
    puts element.dataset["category-id"]

Reflex root

Instead of updating your entire page, you can specify exactly which parts of the DOM will be updated using the data-reflex-root attribute. Full docs

<!-- index.html.erb -->
<div data-reflex-root="[forward],[backward]">
  <input type="text" value="<%= @words %>" data-reflex="keyup->Example#words">
  <div forward><%= @words %></div>
  <div backward><%= @words&.reverse %></div>
# example_reflex.rb
  def words
    @words = element[:value]

Permanent elements

Add data-reflex-permanent to any element in your DOM, and it will be left unchanged by full-page Reflex updates and morph calls that re-render partials.

<!-- index.html.erb -->
<div data-reflex-permanent>
  <iframe src="" frameborder="0" scrolling="0" class="ghbtn"></iframe>
  <iframe src="" frameborder="0" scrolling="0" class="ghbtn"></iframe>

Aborting a reflex

call raise :abort within a reflex method to cancel it.

# comment_reflex.rb
class CommentReflex < ApplicationReflex
  def create
    raise :abort

338+ more cheat sheets for you in April 2024

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️

© 2024 GitPiper. All rights reserved

Rackpiper Technology Inc


About UsBlogContact

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️