Code Snippets
Ready-to-use code snippets with syntax highlighting. Copy, paste, and customize for your projects.
Debounce Function
A utility function to limit how often a function can be called. Perfect for search inputs and resize handlers.
function debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);Deep Clone Object
Create a deep copy of an object, handling nested objects and arrays properly.
function deepClone(obj) {
if (obj === null || typeof obj !== "object") {
return obj;
}
Throttle Function
Limit function execution to once per specified time period. Great for scroll events.
function throttle(func, limit) {
let inThrottle;
return function(...args) {
if (!inThrottle) {
func.apply(this, args);Generic API Response Type
A reusable TypeScript type for API responses with proper error handling.
interface ApiResponse<T> {
data: T | null;
error: string | null;
status: "success" | "error" | "loading";
}Type-Safe Event Emitter
A fully typed event emitter for TypeScript applications.
type EventMap = Record<string, any>;
type EventKey<T extends EventMap> = string & keyof T;
type EventCallback<T> = (payload: T) => void;
class TypedEventEmitter<T extends EventMap> {useLocalStorage Hook
A custom React hook for persisting state in localStorage with TypeScript support.
import { useState, useEffect } from "react";
function useLocalStorage<T>(key: string, initialValue: T) {
const [storedValue, setStoredValue] = useState<T>(() => {
if (typeof window === "undefined") {useDebounce Hook
A React hook that debounces a value, perfect for search inputs.
import { useState, useEffect } from "react";
function useDebounce<T>(value: T, delay: number): T {
const [debouncedValue, setDebouncedValue] = useState<T>(value);
useFetch Hook
A custom hook for data fetching with loading and error states.
import { useState, useEffect } from "react";
interface FetchState<T> {
data: T | null;
loading: boolean;Glassmorphism Card
A modern glass-effect card component using backdrop-filter.
.glass-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 16px;Smooth Scroll Behavior
Enable smooth scrolling across your entire website with CSS.
/* Enable smooth scrolling globally */
html {
scroll-behavior: smooth;
}
Format Currency
Format numbers as currency with proper locale support.
function formatCurrency(
amount: number,
currency: string = "USD",
locale: string = "en-US"
): string {Generate UUID
Generate a RFC4122 compliant UUID v4.
function generateUUID(): string {
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
const r = (Math.random() * 16) | 0;
const v = c === "x" ? r : (r & 0x3) | 0x8;
return v.toString(16);