codesnips

stimulus

javascript 
import { Controller } from "@hotwired/stimulus"

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

  toggle() {

Mobile-first responsive navigation with Stimulus

stimulus responsive mobile
by Jordan Lee 2 tabs
ruby 
class DocumentsController < ApplicationController
  before_action :set_document, only: :destroy

  def destroy
    @document.discard!

Undo delete with a Turbo Stream “restore” action

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

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

  connect() {

Toast notifications with Stimulus and Tailwind

stimulus ux notifications
by Jordan Lee 3 tabs
ruby 
class SubscriptionsController < ApplicationController
  def new
    @subscription = current_account.subscriptions.new
  end

  def create

Turbo Streams: append server-side validation warnings

rails turbo hotwire
by codesnips 4 tabs
erb 
<%# renders a lazy placeholder; real content arrives when scrolled into view %>
<div class="panel-card">
  <h3 class="panel-card__title"><%= title %></h3>

  <%= turbo_frame_tag dom_id(panel, :frame),
        class: "panel-card__body",

Lazy-load heavy panels with IntersectionObserver + Turbo frame

rails hotwire stimulus
by codesnips 3 tabs
ruby 
class TurboFailureApp < Devise::FailureApp
  def respond
    if turbo_request?
      redirect_for_turbo
    else
      super

Handle 401 responses in Turbo by forcing a full redirect

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

export default class extends Controller {
  static targets = ["input", "results"]
  static outlets = ["results-list"]
  static values = {

Stimulus outlets for inter-controller communication

stimulus javascript architecture
by Jordan Lee 3 tabs
ruby 
class PostsController < ApplicationController
  def new
    @post = Post.new
  end

  def create

Inline markdown preview using Turbo Frames

rails hotwire turbo
by codesnips 4 tabs
erb 
<%= form_with url: autosave_draft_path,
              method: :post,
              local: false,
              data: {
                controller: "autosave",
                autosave_target: "form",

Autosave drafts with Stimulus + Turbo (lightweight)

rails hotwire stimulus
by codesnips 3 tabs
ruby 
class Recipe < ApplicationRecord
  has_many :ingredients, inverse_of: :recipe, dependent: :destroy

  accepts_nested_attributes_for :ingredients,
    allow_destroy: true,
    reject_if: :all_blank

Add/remove nested fields with Stimulus (no cocoon)

rails hotwire stimulus
by codesnips 4 tabs
erb 
<!DOCTYPE html>
<html>
  <head>
    <title>Contacts</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

Turbo Frames modal: load, submit, then close via stream

rails turbo hotwire
by codesnips 4 tabs
erb 
<%# Append is also broadcast from the model; this response scrolls the author's view %>
<%= turbo_stream.append "messages" do %>
  <%= render partial: "messages/message", locals: { message: @message } %>
<% end %>

<turbo-stream action="scroll_to" target="<%= dom_id(@message) %>" behavior="smooth" block="end">

Scroll into view after append using a custom Turbo Stream action

rails hotwire turbo
by codesnips 4 tabs