stimulus

erb
<%= form_with model: @profile do |form| %>
  <div
    class="field"
    data-controller="character-count"
    data-character-count-max-value="280"
  >

Character counter for textareas with Stimulus

rails hotwire stimulus
by codesnips 3 tabs
erb
<h1>Catalog</h1>

<%= turbo_frame_tag "products" do %>
  <div class="product-grid" data-controller="frame">
    <% @products.each do |product| %>
      <%= render "products/card", product: product %>

Pagination links that escape a Turbo Frame with _top

rails hotwire turbo
by codesnips 4 tabs
javascript
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["sentinel"]
  static values = {
    url: String

Infinite scroll with Turbo Frames and Intersection Observer

hotwire turbo stimulus
by Jordan Lee 3 tabs
ruby
class WizardsController < ApplicationController
  STEPS = %w[account profile confirm].freeze

  before_action :set_step

  def show

Multi-step wizard navigation with Turbo Frames

rails hotwire turbo
by codesnips 4 tabs
javascript
// app/javascript/controllers/dropdown_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["menu"]

Stimulus for sprinkles of JavaScript interactivity

ruby rails stimulus
by Sarah Mitchell 3 tabs
erb
<div class="copy-field"
     data-controller="clipboard"
     data-clipboard-content-value="<%= content %>"
     data-clipboard-success-value="Copied!">

  <input type="text"

Copy-to-clipboard button with Stimulus

rails hotwire stimulus
by codesnips 3 tabs
ruby
class ApplicationController < ActionController::Base
  before_action :set_turbo_cache_control

  class_attribute :turbo_no_cache, default: false

  def self.no_turbo_cache

Avoid caching sensitive pages in Turbo Drive

rails hotwire turbo
by codesnips 4 tabs
erb
<div class="settings-layout">
  <nav class="settings-sidebar">
    <h2>Settings</h2>
    <ul>
      <% settings_sections.each do |section| %>
        <li class="<%= "active" if current_page?(section.path) %>">

Turbo Frames: scoped navigation inside a sidebar

rails turbo hotwire
by codesnips 3 tabs
javascript
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static values = { keymap: Object }

  connect() {

Stimulus: keyboard shortcuts that work with Turbo navigation

rails stimulus hotwire
by codesnips 3 tabs
javascript
import { StreamActions } from "@hotwired/turbo"

StreamActions.flash = function () {
  const container = document.getElementById("flashes")
  if (!container) return

Turbo Streams: custom action for flash messages

rails turbo hotwire
by codesnips 3 tabs
ruby
class CommentsController < ApplicationController
  before_action :set_post

  def new
    @comment = @post.comments.build
  end

Turbo Stream form errors: replace only the form frame

rails turbo hotwire
by codesnips 4 tabs
ruby
class ImportRun < ApplicationRecord
  enum status: { pending: 0, running: 1, completed: 2, failed: 3 }

  def percent
    return 0 if total.to_i.zero?
    [(processed.to_f / total * 100).round, 100].min

Live Turbo Streams Progress Bar for a Long Rails Job

rails turbo-streams hotwire
by codesnips 4 tabs