typescript

typescript
import { useEffect, useState } from "react";

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

  useEffect(() => {

Build a Debounced Search Box in React with a Reusable useDebouncedValue Hook

react hooks typescript
by codesnips 3 tabs
typescript
import { Helmet } from 'react-helmet-async'

interface SEOProps {
  title: string
  description: string
  image?: string

SEO optimization with React Helmet

react seo react-helmet
by Maya Patel 2 tabs
typescript
export const TOTAL_STEPS = 3;

export interface WizardData {
  email: string;
  password: string;
  fullName: string;

Typed Multi-Step Wizard Form With a useReducer State Machine in React

react typescript usereducer
by codesnips 4 tabs
typescript
import { Injectable } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Injectable()
export class SignupFormService {
  readonly form: FormGroup;

Multi-Step Signup Wizard in Angular with a Shared FormGroup and Stepper Service

angular reactive-forms wizard
by codesnips 4 tabs
typescript
export interface CronFields {
  minute: Set<number>;
  hour: Set<number>;
  dayOfMonth: Set<number>;
  month: Set<number>;
  dayOfWeek: Set<number>;

Cron-Expression Scheduler with Field Parser and a Tick Loop in TypeScript

cron scheduler parser
by codesnips 3 tabs
typescript
import React, { Component, ReactNode } from 'react'

interface Props {
  children: ReactNode
  fallback?: ReactNode
  onError?: (error: Error, errorInfo: React.ErrorInfo) => void

Error boundaries for graceful error handling

react error-handling typescript
by Maya Patel 2 tabs
plaintext
model User {
  id        String    @id @default(uuid())
  email     String    @unique
  name      String
  posts     Post[]
  deletedAt DateTime?

Soft-Delete and Restore in TypeScript with a Prisma Repository and Migration

prisma postgres soft-delete
by codesnips 4 tabs
typescript
import { createContext } from 'react';

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

export interface Toast {
  id: number;

Imperative Toast Notification System with React Context and Auto-Dismiss

react toast context
by codesnips 4 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
typescript
import { useForm } from 'react-hook-form'
import { useState } from 'react'
import api from '@/services/api'

interface SignupFormData {
  email: string

React Hook Form with async validation

react forms validation
by Maya Patel 1 tab
typescript
export interface DocState {
  text: string;
  selection: number;
}

export interface Command<S> {

Undo/Redo in a React Text Editor with a Command-History Stack

react hooks undo-redo
by codesnips 3 tabs
typescript
import { NestFactory } from '@nestjs/core';
import { ValidationPipe } from '@nestjs/common';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

Global ValidationPipe with class-validator DTOs and Transform in NestJS

nestjs validation dto
by codesnips 3 tabs