React
React Hooks and component snippets
useDebounce Hook
A custom React Hook for debouncing values and functions with TypeScript support
import { useState, useEffect } from 'react';
function useDebounce<T>(value: T, delay = 500): T {
...useClickOutside Hook
A custom React Hook to detect clicks outside a component (e.g. modals/dropdowns) with TypeScript support
import { useEffect, RefObject } from 'react';
type Handler = (event: MouseEvent | TouchEvent) => void;
...useFetch Hook
A custom React Hook for handling API requests with loading/error states and TypeScript support
import { useState, useEffect, useCallback } from 'react';
type FetchState<T> = {
...useForm Hook
A lightweight custom React Hook for form state management with validation and TypeScript support
import { useState, ChangeEvent } from 'react';
type ValidationRules<T> = {
...useIntersectionObserver Hook
A custom React Hook for detecting element visibility with Intersection Observer API and TypeScript support
import { useState, useEffect, RefObject } from 'react';
type IntersectionObserverOptions = {
...useMediaQuery Hook
A custom React Hook for detecting media query matches (responsive design) with TypeScript support
import { useState, useEffect } from 'react';
function useMediaQuery(query: string): boolean {
...usePrevious Hook
A custom React Hook to get the previous value of a state/prop with TypeScript support
import { useRef, useEffect } from 'react';
function usePrevious<T>(value: T): T | undefined {
...useTimeout Hook
A custom React Hook for managing setTimeout with cleanup and re-render support (TypeScript)
import { useCallback, useEffect, useRef } from 'react';
function useTimeout(
...useLocalStorageWithExpiry Hook
A custom React Hook for persisting state to localStorage with expiration time and TypeScript support
import { useState, useEffect } from 'react';
type StoredValue<T> = {
...useReducerWithLocalStorage Hook
A custom React Hook combining useReducer with localStorage persistence (TypeScript support)
import { useReducer, useEffect, Reducer } from 'react';
type ReducerAction<T> = {
...useLocalStorage Hook
A minimal custom React Hook for persisting state to localStorage with TypeScript support (without expiry)
import { useState, useEffect } from 'react';
function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T | ((val: T) => T)) => void] {
...useSessionStorage Hook
A custom React Hook for persisting state to sessionStorage with TypeScript support
import { useState, useEffect } from 'react';
function useSessionStorage<T>(key: string, initialValue: T): [T, (value: T | ((val: T) => T)) => void] {
...useKeyPress Hook
A custom React Hook to detect keyboard key presses with TypeScript support
import { useState, useEffect } from 'react';
function useKeyPress(targetKey: string | string[]): boolean {
...useLongPress Hook
A custom React Hook to detect long press events on elements with TypeScript support
import { useCallback, useRef, useState } from 'react';
type LongPressOptions = {
...useWindowSize Hook
A custom React Hook to track window size changes with TypeScript support
import { useState, useEffect } from 'react';
type WindowSize = {
...useScrollPosition Hook
A custom React Hook to track scroll position of window/element with TypeScript support
import { useState, useEffect, RefObject } from 'react';
type ScrollPosition = {
...useToggle Hook
A minimal custom React Hook for boolean state toggling with TypeScript support
import { useState, useCallback } from 'react';
function useToggle(initialValue = false): [boolean, () => void, (value: boolean) => void] {
...useArray Hook
A custom React Hook for array state management with common operations (TypeScript)
import { useState, useCallback } from 'react';
function useArray<T>(initialValue: T[] = []): {
...useDebouncedCallback Hook
A custom React Hook for debouncing functions/callbacks with TypeScript support
import { useCallback, useRef } from 'react';
function useDebouncedCallback<T extends (...args: any[]) => any>(
...useThrottledCallback Hook
A custom React Hook for throttling functions/callbacks with TypeScript support
import { useCallback, useRef } from 'react';
function useThrottledCallback<T extends (...args: any[]) => any>(
...useAsync Hook
A custom React Hook for handling async operations with loading/error states (TypeScript)
import { useState, useCallback, useRef, useEffect } from 'react';
type AsyncState<T> = {
...useIdle Hook
A custom React Hook to detect user idle/inactivity with TypeScript support
import { useState, useEffect, useRef } from 'react';
function useIdle(
...useFocus Hook
A custom React Hook to manage focus state of an element with TypeScript support
import { useState, useEffect, RefObject, useCallback } from 'react';
function useFocus<T extends HTMLElement = HTMLElement>(
...useHover Hook
A custom React Hook to detect hover state of an element with TypeScript support
import { useState, useEffect, RefObject, useCallback } from 'react';
function useHover<T extends HTMLElement = HTMLElement>(
...useDocumentTitle Hook
A custom React Hook to manage document title with TypeScript support
import { useEffect, useRef } from 'react';
function useDocumentTitle(title: string, restoreOnUnmount = true): void {
...useScript Hook
A custom React Hook to dynamically load external scripts with TypeScript support
import { useState, useEffect } from 'react';
type ScriptStatus = 'idle' | 'loading' | 'ready' | 'error';
...useResizeObserver Hook
A custom React Hook to track element size changes with ResizeObserver API (TypeScript)
import { useState, useEffect, RefObject } from 'react';
type ElementSize = {
...useOnlineStatus Hook
A custom React Hook to detect network online/offline status with TypeScript support
import { useState, useEffect } from 'react';
function useOnlineStatus(): boolean {
...useClipboard Hook
A custom React Hook for clipboard copy/paste functionality with TypeScript support
import { useState, useCallback } from 'react';
type ClipboardResult = {
...useCountdown Hook
A custom React Hook for countdown timer with TypeScript support
import { useState, useEffect, useRef, useCallback } from 'react';
type CountdownState = {
...