🚀 Hoxa - React Hook Library

You needed these hooks yesterday

Over 50+ fully-typed React Hooks that save your time, reduce boilerplate, and just work.
Perfect for any React/Next.js project.

✨ Features

• 🧠 50+ hooks: utility, DOM, event, state, media, form, storage, etc.
• 🔧 Built with developer experience in mind
• 💡 Useful defaults, real-world use cases
• 🧪 Tested and production-ready

V 0.0.6 Set

Table of Contents

• State Management
• UI & DOM
• Async Operations
• Browser APIs
• Forms
• Performance
• Animation & Media
• Networking
• Error Handling
• Miscellaneous

State Management

useLocalStorageState

Persists state in localStorage and synchronizes across tabs
Inputs:

• key: string
• initialValue: T | (() => T)
• options?: { serialize?: (value: T) => string, deserialize?: (storedValue: string) => T }
  Outputs:
• [state: T, setState: (value: T | ((prev: T) => T)) => void]

useDebouncedState

State hook that debounces updates
Inputs:

• initialValue: T
• delay: number
  Outputs:
• [value: T, debouncedValue: T, setValue: React.Dispatch<React.SetStateAction<T>>]

useThrottleState

State hook that throttles updates
Inputs:

• initialValue: T
• interval: number
  Outputs:
• [value: T, setValue: React.Dispatch<React.SetStateAction<T>>]

usePrevious

Stores previous value of state/prop
Inputs:

• value: T
  Outputs:
• previousValue: T | undefined

usePreviousDistinct

Stores previous distinct value
Inputs:

• value: T
• compare?: (a: T, b: T) => boolean
  Outputs:
• previousDistinctValue: T | undefined

useUndoRedo

State history with undo/redo
Inputs:

• initialValue: T
• maxHistory?: number
  Outputs:
• { current: T, set: (value: T) => void, undo: () => void, redo: () => void, clearHistory: () => void, canUndo: boolean, canRedo: boolean }

useStateWithHistory

State that records all changes
Inputs:

• initialValue: T
• maxHistory?: number
  Outputs:
• [value: T, setValue: (value: T | ((prev: T) => T)) => void, { history: T[], pointer: number, back: () => void, forward: () => void, go: (index: number) => void }]

useLazyState

Lazily updates state with async function
Inputs:

• initialValue: T
• asyncSetter: (current: T) => Promise<T>
  Outputs:
• [state: T, setAsync: () => Promise<void>]

useSSRState

Ensures consistent state between server and client
Inputs:

• initialValue: T | (() => T)
• key: string
  Outputs:
• [state: T, setState: React.Dispatch<React.SetStateAction<T>>]

UI & DOM

useClickOutside

Detects clicks outside element(s)
Inputs:

• handler: (event: MouseEvent | TouchEvent) => void
• elements?: RefObject<HTMLElement>[] | null
  Outputs:
• ref: RefObject<T>

useHover

Detects hover state
Inputs:

• None
  Outputs:
• [ref: RefObject<T>, isHovered: boolean]

useHoverDelay

Hover detection with delay
Inputs:

• delay?: number
  Outputs:
• [isHovered: boolean, { onMouseEnter: () => void; onMouseLeave: () => void }]

useFocusTrap

Traps focus within element
Inputs:

• active?: boolean
  Outputs:
• ref: RefObject<T>

useOnScreen

Detects if element is in viewport
Inputs:

• options?: IntersectionObserverInit
  Outputs:
• [ref: MutableRefObject<T | null>, isVisible: boolean]

useIntersectionObserver

Tracks element visibility
Inputs:

• options?: IntersectionObserverInit
  Outputs:
• [ref: MutableRefObject<Element | null>, isIntersecting: boolean]

useResizeObserver

Tracks element size changes
Inputs:

• ref: MutableRefObject<T | null>
  Outputs:
• dimensions: DOMRectReadOnly | null

useScrollbarWidth

Measures browser scrollbar width
Inputs:

• None
  Outputs:
• width: number

useMultiRefs

Manages refs for dynamic lists
Inputs:

• None
  Outputs:
• [setRef: (index: number) => (element: T | null) => void, refs: T[]]

useSynchronizedScroll

Synchronizes scrolling between elements
Inputs:

• refs: React.RefObject<HTMLElement>[]
  Outputs:
• None

useGesture

Detects drag gestures
Inputs:

• None
  Outputs:
• [ref: React.RefObject<HTMLElement>, state: { isDragging: boolean; startX: number; startY: number; deltaX: number; deltaY: number; }]

useDarkMode

Manages dark mode preference
Inputs:

• options?: { localStorageKey?: string, defaultDark?: boolean }
  Outputs:
• [isDark: boolean, setIsDark: (dark: boolean) => void]

Async Operations

useAsyncRetry

Retries async functions automatically
Inputs:

• asyncFunction: () => Promise<T>
• options?: { retryDelay?: number; maxRetries?: number }
  Outputs:
• { loading: boolean; error: Error | null; value: T | null; retryCount: number; retry: () => void }

usePromiseQueue

Queues promises sequentially
Inputs:

• None
  Outputs:
• { enqueue: (task: () => Promise<any>) => void, isRunning: boolean, queueSize: number }

usePolling

Executes function at intervals
Inputs:

• callback: () => Promise<void> | void
• interval: number
• immediate?: boolean
  Outputs:
• { start: () => void, stop: () => void }

useTimeout

Runs callback after delay
Inputs:

• callback: () => void
• delay: number | null
• dependencies?: any[]
  Outputs:
• None

useTimeoutFn

Manages timeout with control
Inputs:

• None
  Outputs:
• { set: (fn: () => void, delay: number) => void, clear: () => void, reset: (fn: () => void, delay: number) => void }

useEventQueue

Processes events sequentially
Inputs:

• processor: (event: T) => Promise<void>
• options?: { interval?: number }
  Outputs:
• { addToQueue: (event: T) => void, queueSize: number }

useMultiStepForm

Manages multi-step forms
Inputs:

• steps: StepComponent[]
• initialData?: any
  Outputs:
• { CurrentStep: React.FC, currentStep: number, next: (stepData?: any) => void, prev: () => void, goToStep: (index: number) => void, formData: any, isFirst: boolean, isLast: boolean, totalSteps: number }

Browser APIs

useWindowSizeDebounced

Tracks debounced window size
Inputs:

• debounceDelay?: number
  Outputs:
• { width: number; height: number }

useOnlineStatus

Tracks browser online status
Inputs:

• None
  Outputs:
• isOnline: boolean

usePageVisibility

Detects tab visibility
Inputs:

• None
  Outputs:
• isVisible: boolean

useCopyToClipboard

Copies text to clipboard
Inputs:

• timeout?: number
  Outputs:
• [copied: boolean, copyToClipboard: (text: string) => Promise<boolean>]

useClipboardListener

Listens for copy/paste events
Inputs:

• onCopy?: (text: string) => void
• onPaste?: (text: string) => void
  Outputs:
• None

useMediaQuery

Tracks media query matches
Inputs:

• query: string
  Outputs:
• matches: boolean

usePrefersReducedMotion

Detects reduced motion preference
Inputs:

• None
  Outputs:
• prefersReduced: boolean

useNetworkStatus

Tracks network information
Inputs:

• None
  Outputs:
• { effectiveType: string; rtt: number; downlink: number; saveData: boolean }

useIdleTimeout

Triggers callback after inactivity
Inputs:

• callback: () => void
• timeout?: number
  Outputs:
• None

Forms

useInputValidation

Manages form input validation
Inputs:

• initialValue?: string
• rules?: { required?: boolean; minLength?: number; maxLength?: number; pattern?: RegExp; validate?: (value: string) => boolean }
  Outputs:
• { value: string; setValue: React.Dispatch<React.SetStateAction<string>>; onChange: (e: React.ChangeEvent<HTMLInputElement>) => void; onBlur: () => void; errors: string[]; isValid: boolean; dirty: boolean; validate: () => boolean; reset: () => void }

Performance

useDeepCompareEffect

useEffect with deep comparison
Inputs:

• effect: React.EffectCallback
• dependencies: any[]
  Outputs:
• None

useThrottle

Throttles function execution
Inputs:

• func: T
• wait: number
• options?: { leading?: boolean; trailing?: boolean }
  Outputs:
• throttledFunction: (...args: Parameters<T>) => void

useThrottleEvent

Throttles event listeners
Inputs:

• eventName: string
• callback: T
• throttleTime: number
• element?: HTMLElement | Window | Document
  Outputs:
• None

useEventCallback

Stable callback reference
Inputs:

• fn: T
  Outputs:
• stableFn: T

Animation & Media

useBezierEase

Creates cubic Bézier easing function
Inputs:

• p1x: number
• p1y: number
• p2x: number
• p2y: number
  Outputs:
• easingFunction: (t: number) => number

Networking

useFetchWithCache

Fetches data with caching
Inputs:

• url: string
• options?: RequestInit
• cacheKey?: string
  Outputs:
• { data: T | null; loading: boolean; error: Error | null; refresh: () => void }

useScriptLoader

Loads external scripts
Inputs:

• src: string
• options?: { async?: boolean; defer?: boolean; attributes?: Record<string, string> }
  Outputs:
• status: 'loading' | 'ready' | 'error'

useScriptState

Tracks script loading status
Inputs:

• src: string
  Outputs:
• status: 'loading' | 'ready' | 'error' | 'idle'

Error Handling

useErrorBoundary

Catches component errors
Inputs:

• None
  Outputs:
• { setError: (error: Error) => void, resetError: () => void }

Miscellaneous

useEventListener

Attaches event listeners
Inputs:

• eventType: K
• handler: (event: WindowEventMap[K]) => void
• element?: Window | Document
• options?: AddEventListenerOptions
  Outputs:
• None

useLocalStorageEffect

Effect based on localStorage
Inputs:

• key: string
• effect: (storedValue: any) => void
• dependencies?: any[]
  Outputs:
• None

useEventEmitter

Creates event emitter
Inputs:

• None
  Outputs:
• { emit: (data: T) => void, subscribe: (listener: (data: T) => void) => () => void }

📦 Installation

npm install hoxa
# or
yarn add hoxa
# or
bun add hoxa

Bugs Improvement

If you encounter any bugs or issues while using this project, please report them to taarn.ng@gmail.com. Your feedback helps us improve and make the project better for everyone.

Thank you for your support!