codesnips

react

typescript 
import { createContext } from "react";

export type ToastVariant = "info" | "success" | "error";

export interface Toast {
  id: string;

Toast Notification Queue with a useToast Hook and Context Provider in React

react hooks context
by codesnips 4 tabs
javascript 
const { EventEmitter } = require('events');

class NotificationBus extends EventEmitter {
  constructor(bufferSize = 100) {
    super();
    this.setMaxListeners(0);

Server-Sent Events for Live Notifications with a Reconnectable EventSource Hook

sse server-sent-events eventsource
by codesnips 3 tabs
typescript 
export class TimeoutError extends Error {
  constructor(public readonly ms: number) {
    super(`Request timed out after ${ms}ms`);
    this.name = "TimeoutError";
  }
}

HTTP client timeout with AbortController (fetch)

fetch abortcontroller timeout
by codesnips 3 tabs
typescript 
import { Link } from 'react-router-dom'
import { useQueryClient } from '@tanstack/react-query'
import api from '@/services/api'
import { PostId } from '@/types'

interface PostLinkProps {

Prefetching data on hover for instant navigation

react performance prefetching
by Maya Patel 1 tab
typescript 
import React from 'react'

interface SkeletonProps {
  width?: string | number
  height?: string | number
  className?: string

Skeleton screens for better perceived performance

react ux performance
by Maya Patel 3 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
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
typescript 
export type PostId = string & { readonly brand: unique symbol }
export type UserId = string & { readonly brand: unique symbol }

export interface User {
  id: UserId
  name: string

TypeScript types from Rails serializers

typescript types rails
by Maya Patel 1 tab
typescript 
import { useEffect, useRef, ReactNode } from 'react'
import { createPortal } from 'react-dom'

interface ModalProps {
  isOpen: boolean
  onClose: () => void

Modal dialogs with focus trapping and accessibility

react accessibility modal
by Maya Patel 1 tab
typescript 
import { z } from 'zod';

export const signupSchema = z
  .object({
    email: z.string().min(1, 'Email is required').email('Enter a valid email'),
    username: z

Field-Level Signup Validation with Zod and a Typed useZodForm Hook

react zod forms
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(() => {

Debounced Search Box With AbortController to Cancel Stale Fetches in React

react hooks debounce
by codesnips 3 tabs