codesnips

hooks

typescript 
import { Controller, Sse, Headers } from '@nestjs/common';
import { interval, Observable } from 'rxjs';
import { map } from 'rxjs/operators';

interface FeedPayload {
  id: number;

Streaming Server-Sent Events into a Live React List with an EventSource Hook

react sse eventsource
by codesnips 3 tabs
typescript 
import { useReducer } from 'react'

interface FormState {
  values: Record<string, any>
  errors: Record<string, string>
  touched: Record<string, boolean>

React useReducer for complex state logic

react hooks state-management
by Maya Patel 1 tab
typescript 
export interface UploadHandle {
  promise: Promise<{ status: number; body: string }>;
  xhr: XMLHttpRequest;
}

export function uploadFile(

React File Upload with Live Progress Bar Using XMLHttpRequest

react file-upload xmlhttprequest
by codesnips 3 tabs
typescript 
export interface Post {
  id: string;
  title: string;
  updatedAt: string;
}

Deduplicating Paginated API Results With a Normalized Entity Store and Reducer

react reducer normalization
by codesnips 3 tabs
typescript 
export type Validator = (value: string) => string | null;

export const required = (message = 'This field is required'): Validator => {
  return (value) => (value.trim().length === 0 ? message : null);
};

Field-Level Form Validation with a Reusable useField Hook in React

react hooks forms
by codesnips 3 tabs
typescript 
import { useEffect, useState } from "react";

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

  useEffect(() => {

Debounced Draft Autosave with React Query and a Saving-Status Indicator

react react-query autosave
by codesnips 4 tabs
typescript 
export type EventMap = Record<string, unknown[]>;

type Listener<Args extends unknown[]> = (...args: Args) => void;

export class TypedEmitter<Events extends EventMap> {
  private listeners = new Map<keyof Events, Set<Listener<any>>>();

Type-Safe Event Emitter With Strongly-Typed Listener Payloads in TypeScript

typescript events event-emitter
by codesnips 3 tabs
javascript 
import { useCallback, useEffect, useRef } from 'react';

export function useRafThrottle(callback) {
  const savedCallback = useRef(callback);
  const frame = useRef(null);
  const latestArgs = useRef([]);

Throttling a Scroll-Driven Reading Progress Bar with requestAnimationFrame in React

react hooks scroll
by codesnips 4 tabs
typescript 
import { useCallback, useEffect, useRef, useState } from 'react';

export type CopyStatus = 'idle' | 'copied' | 'error';

function fallbackCopy(text: string): boolean {
  const textarea = document.createElement('textarea');

Frontend: copy-to-clipboard with fallback

frontend ux react
by codesnips 3 tabs
typescript 
import { Response } from 'express';

type Client = { id: number; res: Response };

const clients = new Map<string, Set<Client>>();
let nextId = 1;

SSE endpoint for server-to-browser events

realtime sse express
by codesnips 3 tabs
typescript 
import { useCallback, useState } from 'react';

type CopiedValue = string | null;
type CopyFn = (text: string) => Promise<boolean>;

function legacyCopy(text: string): boolean {

React useCopyToClipboard Hook With execCommand Fallback and Reset Timeout

react hooks clipboard
by codesnips 3 tabs
typescript 
import React, { useMemo } from 'react';
import { VirtualList } from './VirtualList';

interface LogEntry {
  id: number;
  level: 'info' | 'warn' | 'error';

Virtualized List in React: Render Only Visible Rows on Scroll

react virtualization windowing
by codesnips 3 tabs