typescript

typescript
import { Suspense } from 'react'
import { useSuspenseQuery } from '@tanstack/react-query'
import { useParams } from 'react-router-dom'
import api from '@/services/api'
import { Post } from '@/types'
import { ErrorBoundary } from '@/components/ErrorBoundary'

React Suspense for data fetching

react suspense async-loading
by Maya Patel 1 tab
typescript
import { ReactNode, useEffect, useState } from 'react'
import { createPortal } from 'react-dom'

interface PortalProps {
  children: ReactNode
  container?: Element

React portals for rendering outside component tree

react portals dom
by Maya Patel 2 tabs
typescript
import { Link, useLocation, useMatches } from 'react-router-dom'

interface BreadcrumbMatch {
  pathname: string
  handle?: {
    crumb?: (data?: any) => string

Breadcrumb navigation from React Router

react react-router navigation
by Maya Patel 2 tabs
typescript
import { cookies } from "next/headers";
import { jwtVerify } from "jose";

export interface Session {
  userId: string;
  role: "user" | "admin";

Next.js Route Handler with auth guard

nextjs route-handlers authentication
by codesnips 3 tabs
typescript
export interface Todo {
  id: string;
  title: string;
  done: boolean;
}

Optimistic Todo Toggling in React with Rollback via useReducer

javascript typescript react
by codesnips 3 tabs
typescript
import { Readable } from "node:stream";
import { S3Client } from "@aws-sdk/client-s3";
import { Upload } from "@aws-sdk/lib-storage";

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

Multipart upload streaming (busboy)

busboy express s3
by codesnips 3 tabs
typescript
import React, { createContext, useContext, useState, ReactNode } from 'react'

interface TabsContextType {
  activeTab: string
  setActiveTab: (tab: string) => void
}

Compound components pattern for flexible APIs

react patterns components
by Maya Patel 2 tabs
typescript
import { Injectable, signal, computed } from '@angular/core';

export interface CurrentUser {
  id: string;
  email: string;
  roles: string[];

Guarding a Lazy-Loaded Angular Admin Route with a Functional CanActivate Role Check

angular routing lazy-loading
by codesnips 3 tabs
typescript
import { SetMetadata } from '@nestjs/common';

export const CACHEABLE_KEY = 'cacheable:options';

export type VaryDimension = 'user' | 'tenant' | 'query';

Per-Route Response Caching in NestJS with a Custom CacheInterceptor and Cache Key Builder

nestjs caching interceptors
by codesnips 4 tabs
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
typescript
import { initTRPC, TRPCError } from '@trpc/server';

export interface Context {
  user: { id: string; role: 'user' | 'admin' } | null;
  db: DatabaseClient;
}

tRPC router pattern for type-safe APIs

typescript trpc api
by codesnips 4 tabs
typescript
import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError } from 'rxjs/operators';

export interface SearchResult {

Debounced Typeahead Search in Angular with switchMap and Cancellation

angular rxjs typeahead
by codesnips 3 tabs