react

typescript
import { FixedSizeList as List } from 'react-window'
import AutoSizer from 'react-virtualized-auto-sizer'
import { Post } from '@/types'
import { PostCard } from './PostCard'

interface VirtualizedPostListProps {

Virtual scrolling for large lists with react-window

react performance virtual-scrolling
by Maya Patel 1 tab
typescript
export interface UseClipboardResult {
  copied: boolean;
  error: Error | null;
  copy: (value: string) => Promise<boolean>;
}

Copy-to-Clipboard Button With a useClipboard Hook and Timed Success Feedback

react hooks clipboard
by codesnips 3 tabs
typescript
export interface Todo {
  id: string;
  title: string;
  done: boolean;
  pending: boolean;
}

Optimistic To-Do Toggle in React with Rollback via useReducer

react optimistic-ui hooks
by codesnips 3 tabs
typescript
import { startOfDay, isToday, isYesterday, format } from 'date-fns';

export interface ChatMessage {
  id: string;
  senderId: string;
  senderName: string;

Group Chat Messages by Day with a Memoized Selector in React

react typescript selectors
by codesnips 3 tabs
typescript
import { useEffect, useRef } from "react";

const FOCUSABLE = [
  "a[href]",
  "button:not([disabled])",
  "textarea:not([disabled])",

Trap Keyboard Focus in a Modal with a useFocusTrap React Hook

react hooks accessibility
by codesnips 3 tabs
typescript
import { S3Client } from "@aws-sdk/client-s3";
import { createPresignedPost, PresignedPost } from "@aws-sdk/s3-presigned-post";
import { randomUUID } from "crypto";

const s3 = new S3Client({ region: process.env.AWS_REGION });
const BUCKET = process.env.UPLOAD_BUCKET!;

Pre-signed S3 upload from the browser

s3 security aws-sdk
by codesnips 3 tabs
typescript
import React, { createContext, useContext, useEffect, useState, ReactNode } from 'react'

type Theme = 'light' | 'dark'

interface ThemeContextType {
  theme: Theme

Dark mode with Tailwind and localStorage persistence

react tailwind dark-mode
by Maya Patel 3 tabs
typescript
import { useState } from 'react'
import {
  DndContext,
  closestCenter,
  KeyboardSensor,
  PointerSensor,

Drag and drop with dnd-kit

react drag-drop dnd-kit
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'),
    password: z

React Hook Form + Zod resolver

react forms react-hook-form
by codesnips 3 tabs
typescript
export interface CartItem {
  sku: string;
  name: string;
  unitPrice: number; // cents
  qty: number;
}

Shopping Cart Pricing with a useReducer State Machine and a Pure Discount Engine

react usereducer typescript
by codesnips 3 tabs
typescript
import { z } from "zod";

const flagValueSchema = z.union([
  z.boolean(),
  z.object({
    rollout: z.number().min(0).max(100),

Typed Feature-Flag Gate with a Zod Config Loader and useFeatureFlag Hook in React

react feature-flags typescript-hooks
by codesnips 3 tabs
typescript
export const FLAG_REGISTRY = {
  newDashboard: {
    default: false as boolean,
    description: 'Renders the redesigned dashboard shell',
  },
  maxUploadMb: {

Feature flags with a typed registry

typescript feature-flags react
by codesnips 3 tabs