codesnips

frontend

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
typescript 
import { useEffect, useState } from "react";

export function useDebouncedValue<T>(value: T, delay = 300): T {
  const [debounced, setDebounced] = useState<T>(value);

  useEffect(() => {

Build a Debounced Search Box in React with a Reusable useDebouncedValue Hook

react hooks 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
erb 
<div class="bookmarks">
  <h1>Saved Bookmarks</h1>

  <table>
    <tbody id="bookmarks">
      <%= render partial: "bookmark", collection: @bookmarks %>

Link that submits DELETE with Turbo (data-turbo-method)

rails hotwire turbo
by codesnips 4 tabs
javascript 
let installed = false;

function notify(message, level = "error") {
  document.dispatchEvent(
    new CustomEvent("flash:show", { detail: { message, level } })
  );

Turbo Drive lifecycle: attach global error handler

rails turbo hotwire
by codesnips 3 tabs
typescript 
import { useEffect, useState } from 'react';

export function useLocalStorage<T>(
  key: string,
  initialValue: T
): [T, (value: T) => void] {

Persisting a Dark-Mode Theme Toggle with a React ThemeProvider and localStorage

react context hooks
by codesnips 4 tabs
erb 
<%# locals: item %>
<button
  type="button"
  class="toggle-btn"
  data-controller="toggle"
  data-action="click->toggle#toggle"

Optimistic toggle button with Stimulus “revert on failure”

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

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

  connect() {

Autofocus first input when a Turbo modal opens (Stimulus)

rails hotwire stimulus
by codesnips 3 tabs
ruby 
module FlashHelper
  FLASH_CLASSES = {
    "notice" => "flash--success",
    "alert"  => "flash--error",
    "error"  => "flash--error"
  }.freeze

Turbo Stream flash messages without custom JS

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

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

Stimulus: intersection observer for “mark as read”

rails stimulus hotwire
by codesnips 3 tabs