CodeSnips

javascript

import { useEffect, useRef } from 'react';

const TABBABLE = [
  'a[href]',
  'button:not([disabled])',
  'textarea:not([disabled])',

Accessible React Modal with Portal, Focus Trap, and Escape-to-Close Hook

react accessibility modal

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

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 TimeAgoHelper
  def time_ago_tag(time, locale: I18n.locale, **options)
    return if time.blank?

    time = time.to_time
    fallback = l(time, format: :short)

Time-ago formatting with Stimulus (no heavy date libs)

rails hotwire stimulus

by codesnips 3 tabs