hotwire

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
module TurboResponder
  extend ActiveSupport::Concern

  private

  def respond_with_turbo(resource, on_success:, partial:, notice: nil)

A reusable respond_to block for turbo_stream + html

rails hotwire turbo
by codesnips 3 tabs
erb
<%= turbo_stream_from [current_member, :notifications] %>

<div id="notification_badge">
  <%= render 'notifications/badge', count: current_member.notifications.unread.count %>
</div>

Notifications dropdown that live-updates with Turbo Streams

rails hotwire turbo
by Henry Kim 2 tabs
ruby
class ApplicationController < ActionController::Base
  helper_method :turbo_native_app?

  private

  def turbo_native_app?

Turbo Native bridge for mobile hybrid apps

hotwire turbo-native mobile
by Jordan Lee 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
ruby
class CommentsController < ApplicationController
  before_action :set_post

  def create
    @comment = @post.comments.build(comment_params)

Turbo Streams: Create with prepend + HTML fallback

rails turbo hotwire
by codesnips 4 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
erb
<%= link_to 'Newest', posts_path(sort: 'new'), data: { turbo_frame: 'results', turbo_action: 'replace' } %>
<%= link_to 'Popular', posts_path(sort: 'popular'), data: { turbo_frame: 'results', turbo_action: 'replace' } %>

Hotwire-friendly “sort by” links that replace only the list

rails hotwire turbo
by Henry Kim 2 tabs