CodeSnips

typescript

import { RefObject, useEffect, useRef } from "react";

type Handler = (event: MouseEvent | TouchEvent) => void;

export function useClickOutside<T extends HTMLElement>(
  ref: RefObject<T>,

Reusable useClickOutside Hook for Closing Dropdowns in React

react hooks typescript

by codesnips 3 tabs

swift

import SwiftUI

struct AccessiblePostCard: View {
    let post: Post
    @State private var isLiked = false

Accessibility with VoiceOver support

swift swiftui accessibility

by Sofia Martinez 1 tab

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

javascript

import React, { createContext, useCallback, useMemo, useRef, useState } from 'react';
import { ToastViewport } from './ToastViewport';

export const ToastContext = createContext(undefined);

let counter = 0;

Build a React Toast Notification System with Context Provider, Hook, and Portal

react toast context-api

by codesnips 4 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