codesnips

frontend

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
typescript 
export interface Post {
  id: string;
  body: string;
  liked: boolean;
  likeCount: number;
}

React Query optimistic update for likes

react typescript frontend
by codesnips 3 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
typescript 
export interface Page<T> {
  items: T[];
  nextCursor: string | null;
}

export interface Post {

Infinite-Scroll List in React with IntersectionObserver and Cursor Pagination

react hooks infinite-scroll
by codesnips 3 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
typescript 
import React from 'react';
import { useToasts } from './useToasts';

export function Toaster() {
  const { toasts, dismiss } = useToasts();

Frontend: toast notifications via a small event bus

react frontend typescript
by codesnips 3 tabs
erb 
<!DOCTYPE html>
<html>
  <head>
    <title><%= content_for(:title) || "App" %></title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

Disable Turbo Drive on external links

rails hotwire turbo
by codesnips 3 tabs
erb 
<!DOCTYPE html>
<html>
  <head>
    <title><%= content_for(:title) || "App" %></title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

Importmap setup for Stimulus controllers (Rails 7 style)

rails hotwire stimulus
by codesnips 4 tabs