{"id":29193712,"url":"https://github.com/taarnn/hoxa","last_synced_at":"2026-04-13T21:04:59.872Z","repository":{"id":301909630,"uuid":"1010644092","full_name":"TaarnN/Hoxa","owner":"TaarnN","description":"100+ Curated React Hooks to Simplify Your Codebase","archived":false,"fork":false,"pushed_at":"2025-06-29T14:11:56.000Z","size":66,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-29T15:25:30.425Z","etag":null,"topics":["custom-hooks","frontend","hooks","hoxa","nextjs","open-source","react","react-hooks","state-management","use","utils-library"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/hoxa","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TaarnN.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-29T14:10:57.000Z","updated_at":"2025-06-29T14:15:43.000Z","dependencies_parsed_at":"2025-06-29T15:25:59.484Z","dependency_job_id":null,"html_url":"https://github.com/TaarnN/Hoxa","commit_stats":null,"previous_names":["taarnn/hoxa"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/TaarnN/Hoxa","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TaarnN%2FHoxa","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TaarnN%2FHoxa/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TaarnN%2FHoxa/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TaarnN%2FHoxa/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TaarnN","download_url":"https://codeload.github.com/TaarnN/Hoxa/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TaarnN%2FHoxa/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263066558,"owners_count":23408387,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["custom-hooks","frontend","hooks","hoxa","nextjs","open-source","react","react-hooks","state-management","use","utils-library"],"created_at":"2025-07-02T03:07:02.362Z","updated_at":"2026-04-13T21:04:59.866Z","avatar_url":"https://github.com/TaarnN.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚀 Hoxa – The Ultimate React Hook Library\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/hoxa\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/hoxa.svg\" alt=\"npm version\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/hoxa\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/hoxa.svg\" alt=\"npm downloads per month\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/TaarnN/Hoxa/blob/main/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-MIT-blue.svg\" alt=\"license\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003e **100% Tested** • **100+ Production‑Ready Hooks** • **Zero Boilerplate**  \n\u003e Fast, lightweight, and battle‑tested—perfect for any React/Next.js project.\n\n⭐️ Star us on GitHub: [TaarnN/Hoxa](https://github.com/TaarnN/Hoxa)\n\n---\n\n## ✨ Why Hoxa?\n\n- **All Hooks Fully Tested** ✅  \n  Every hook comes with comprehensive unit tests—trustworthy and bug‑free.\n- **100+ Hooks in One Package**  \n  State, UI, forms, animations, networking, performance, and more.\n- **Easy to Use**  \n  Install, import, and call. No heavy dependencies.\n- **Lightweight \u0026 Performant**  \n  Minimal bundle impact, optimized for real‑world apps.\n\n---\n\n## 🚀 Installation\n\n```bash\n# npm\nnpm install hoxa\n\n# Yarn\nyarn add hoxa\n\n# Bun\nbun add hoxa\n\n```\n\n## 📖 Basic Usage Example\n\n```tsx\nimport React from \"react\";\nimport { useLocalStorageState, useClickOutside, useFetchWithCache } from \"hoxa\";\n\nexport function App() {\n  const [name, setName] = useLocalStorageState(\"name\", \"Guest\");\n  const { data, loading, error } = useFetchWithCache\u003c{ message: string }\u003e(\n    \"https://api.example.com/hello\"\n  );\n\n  const handleOutsideClick = () =\u003e console.log(\"Clicked outside!\");\n  const ref = useClickOutside(handleOutsideClick);\n\n  return (\n    \u003cdiv ref={ref} style={{ padding: 20 }}\u003e\n      \u003ch1\u003eHello, {name}!\u003c/h1\u003e\n      \u003cinput\n        value={name}\n        onChange={(e) =\u003e setName(e.target.value)}\n        placeholder=\"Enter your name\"\n      /\u003e\n\n      {loading \u0026\u0026 \u003cp\u003eLoading...\u003c/p\u003e}\n      {error \u0026\u0026 \u003cp\u003eError loading data.\u003c/p\u003e}\n      {data \u0026\u0026 \u003cp\u003eAPI says: {data.message}\u003c/p\u003e}\n    \u003c/div\u003e\n  );\n}\n```\n\n---\n\n## 🔥 Key Features\n\n### **State Management**\n\n- `useUndoRedo`: Track and navigate state history\n- `useDebouncedState`: Delay state updates until inactivity\n- `useThrottleState`: Limit state update frequency\n- `useConditionalState`: State that only updates when conditions are met\n- `useQueue`/`useStack`: Collection management with FIFO/LIFO semantics\n\n### **UI \u0026 DOM Interactions**\n\n- `useHover`: Detect element hover state\n- `useFocusTrap`: Contain focus within DOM elements\n- `useIntersectionObserver`: Track element visibility\n- `useElementSize`: Monitor element dimensions\n- `useDrag`/`useDrop`: Drag-and-drop utilities\n\n### **Async \u0026 Networking**\n\n- `useAsyncRetry`: Auto-retry failed async operations\n- `usePromiseQueue`: Manage concurrent promise execution\n- `useFetchWithCache`: Network requests with caching\n- `useWebSocket`: Real-time WebSocket management\n- `useConcurrentRequests`: Parallel request handling\n\n### **Performance Optimization**\n\n- `useDeepCompareEffect`: Skip unnecessary effect runs\n- `useThrottleEvent`: Rate-limit event handlers\n- `useRenderCount`: Track component re-renders\n- `useMemoCompare`: Memoize with custom comparison\n- `useIsFirstRender`: Detect initial mount\n\n### **Forms \u0026 Validation**\n\n- `useForm`: Complete form state management\n- `useInputValidation`: Real-time field validation\n- `useMultiStepForm`: Wizard-style form flows\n- `useField`: Isolated form field control\n- `useFormReset`: Form state reset utilities\n\n### **Animations \u0026 Effects**\n\n- `useGravityEffect`: Physics-based animations\n- `useEmojiRain`: Falling emoji effects\n- `useRetroFilter`: Vintage visual effects\n- `useConfettiSurprise`: Celebration animations\n- `useMoodLighting`: Dynamic color themes\n\n...and more specialized hooks for every use case!\n\n---\n\n# V1 Set\n\n---\n\n## State Management\n\n### `useLocalStorageState`\n\nPersists state in localStorage and synchronizes across tabs  \n**Inputs:**\n\n- `key: string`\n- `initialValue: T | (() =\u003e T)`\n- `options?: { serialize?: (value: T) =\u003e string, deserialize?: (storedValue: string) =\u003e T }`\n\n**Outputs:**\n\n- `[state: T, setState: (value: T | ((prev: T) =\u003e T)) =\u003e void]`\n\n### `useDebouncedState`\n\nState hook that debounces updates  \n**Inputs:**\n\n- `initialValue: T`\n- `delay: number`\n\n**Outputs:**\n\n- `[value: T, debouncedValue: T, setValue: React.Dispatch\u003cReact.SetStateAction\u003cT\u003e\u003e]`\n\n### `useThrottleState`\n\nState hook that throttles updates  \n**Inputs:**\n\n- `initialValue: T`\n- `interval: number`\n\n**Outputs:**\n\n- `[value: T, setValue: React.Dispatch\u003cReact.SetStateAction\u003cT\u003e\u003e]`\n\n### `usePrevious`\n\nStores previous value of state/prop  \n**Inputs:**\n\n- `value: T`\n\n**Outputs:**\n\n- `previousValue: T | undefined`\n\n### `usePreviousDistinct`\n\nStores previous distinct value  \n**Inputs:**\n\n- `value: T`\n- `compare?: (a: T, b: T) =\u003e boolean`\n\n**Outputs:**\n\n- `previousDistinctValue: T | undefined`\n\n### `useUndoRedo`\n\nState history with undo/redo  \n**Inputs:**\n\n- `initialValue: T`\n- `maxHistory?: number`\n\n**Outputs:**\n\n- `{ current: T, set: (value: T) =\u003e void, undo: () =\u003e void, redo: () =\u003e void, clearHistory: () =\u003e void, canUndo: boolean, canRedo: boolean }`\n\n### `useStateWithHistory`\n\nState that records all changes  \n**Inputs:**\n\n- `initialValue: T`\n- `maxHistory?: number`\n\n**Outputs:**\n\n- `[value: T, setValue: (value: T | ((prev: T) =\u003e T)) =\u003e void, { history: T[], pointer: number, back: () =\u003e void, forward: () =\u003e void, go: (index: number) =\u003e void }]`\n\n### `useLazyState`\n\nLazily updates state with async function  \n**Inputs:**\n\n- `initialValue: T`\n- `asyncSetter: (current: T) =\u003e Promise\u003cT\u003e`\n\n**Outputs:**\n\n- `[state: T, setAsync: () =\u003e Promise\u003cvoid\u003e]`\n\n---\n\n## UI \u0026 DOM\n\n### `useClickOutside`\n\nDetects clicks outside element(s)  \n**Inputs:**\n\n- `handler: (event: MouseEvent | TouchEvent) =\u003e void`\n- `elements?: RefObject\u003cElement\u003e[] | null`\n\n**Outputs:**\n\n- `ref: RefObject\u003cT\u003e`\n\n### `useHover`\n\nDetects hover state  \n**Inputs:**\n\n- None\n\n**Outputs:**\n\n- `[ref: RefObject\u003cT\u003e, isHovered: boolean]`\n\n### `useHoverDelay`\n\nHover detection with delay  \n**Inputs:**\n\n- `delay?: number` (default: 300ms)\n\n**Outputs:**\n\n- `[isHovered: boolean, { onPointerEnter: () =\u003e void; onPointerLeave: () =\u003e void }]`\n\n### `useFocusTrap`\n\nTraps focus within element  \n**Inputs:**\n\n- `active?: boolean`\n\n**Outputs:**\n\n- `ref: RefObject\u003cT\u003e`\n\n### `useOnScreen`\n\nDetects if element is in viewport  \n**Inputs:**\n\n- `options?: IntersectionObserverInit`\n\n**Outputs:**\n\n- `[ref: MutableRefObject\u003cT | null\u003e, isVisible: boolean]`\n\n### `useIntersectionObserver`\n\nTracks element visibility  \n**Inputs:**\n\n- `options?: IntersectionObserverInit`\n\n**Outputs:**\n\n- `[ref: MutableRefObject\u003cElement | null\u003e, isIntersecting: boolean]`\n\n### `useResizeObserver`\n\nTracks element size changes  \n**Inputs:**\n\n- `ref: MutableRefObject\u003cT | null\u003e`\n\n**Outputs:**\n\n- `dimensions: DOMRectReadOnly | null`\n\n### `useScrollbarWidth`\n\nMeasures browser scrollbar width  \n**Inputs:**\n\n- None\n\n**Outputs:**\n\n- `width: number`\n\n### `useMultiRefs`\n\nManages refs for dynamic lists  \n**Inputs:**\n\n- None\n\n**Outputs:**\n\n- `[setRef: (index: number) =\u003e (element: T | null) =\u003e void, refs: React.RefObject\u003cT[]\u003e]`\n\n### `useGesture`\n\nDetects drag gestures  \n**Inputs:**\n\n- None\n\n**Outputs:**\n\n- `[ref: React.RefObject\u003cElement\u003e, state: { isDragging: boolean; startX: number; startY: number; deltaX: number; deltaY: number; }]`\n\n### `useDarkMode`\n\nManages dark mode preference  \n**Inputs:**\n\n- `options?: { localStorageKey?: string, defaultDark?: boolean }`\n\n**Outputs:**\n\n- `[isDark: boolean, setIsDark: (dark: boolean) =\u003e void]`\n\n---\n\n## Async Operations\n\n### `useAsyncRetry`\n\nRetries async functions automatically  \n**Inputs:**\n\n- `asyncFunction: () =\u003e Promise\u003cT\u003e`\n- `options?: { retryDelay?: number; maxRetries?: number }`\n\n**Outputs:**\n\n- `{ loading: boolean; error: Error | null; value: T | null; retryCount: number; retry: () =\u003e void; cancel: () =\u003e void }`\n\n### `usePromiseQueue`\n\nProcesses promises sequentially in a queue  \n**Inputs:**\n\n- None\n\n**Outputs:**\n\n- `{ enqueue: (task: () =\u003e Promise\u003cany\u003e) =\u003e void, isRunning: boolean }`\n\n### `usePolling`\n\nExecutes function at intervals  \n**Inputs:**\n\n- `callback: () =\u003e Promise\u003cvoid\u003e | void`\n- `interval: number`\n- `immediate?: boolean`\n\n**Outputs:**\n\n- `{ start: () =\u003e void, stop: () =\u003e void }`\n\n### `useTimeout`\n\nRuns callback after delay  \n**Inputs:**\n\n- `callback: () =\u003e void`\n- `delay: number | null`\n- `dependencies?: any[]`\n\n**Outputs:**\n\n- None\n\n### `useTimeoutFn`\n\nManages timeout with control  \n**Inputs:**\n\n- None\n\n**Outputs:**\n\n- `{ set: (fn: () =\u003e void, delay: number) =\u003e void, clear: () =\u003e void, reset: (fn: () =\u003e void, delay: number) =\u003e void }`\n\n### `useEventQueue`\n\nProcesses events sequentially  \n**Inputs:**\n\n- `processor: (event: T) =\u003e Promise\u003cvoid\u003e`\n- `options?: { interval?: number }`\n\n**Outputs:**\n\n- `{ addToQueue: (event: T) =\u003e void, queueSize: number }`\n\n### `useMultiStepForm`\n\nManages multi-step forms  \n**Inputs:**\n\n- `steps`: StepComponent[]\n- `initialData?`: any\n\n**Outputs:**\n\n- `{ CurrentStep: React.FC\u003c{ next: (data?: any) =\u003e void; prev: () =\u003e void; data: any; isFirst: boolean; isLast: boolean }\u003e, currentStep: number, next: (stepData?: any) =\u003e void, prev: () =\u003e void, goToStep: (index: number) =\u003e void, formData: any, isFirst: boolean, isLast: boolean, totalSteps: number }`\n\n---\n\n## Browser APIs\n\n### `useWindowSizeDebounced`\n\nTracks debounced window size  \n**Inputs:**\n\n- `debounceDelay?: number`\n\n**Outputs:**\n\n- `{ width: number; height: number }`\n\n### `useOnlineStatus`\n\nTracks browser online status  \n**Inputs:**\n\n- None\n\n**Outputs:**\n\n- `isOnline: boolean`\n\n### `usePageVisibility`\n\nDetects tab visibility  \n**Inputs:**\n\n- None\n\n**Outputs:**\n\n- `isVisible: boolean`\n\n### `useCopyToClipboard`\n\nCopies text to clipboard  \n**Inputs:**\n\n- `timeout?: number`\n\n**Outputs:**\n\n- `[copied: boolean, copyToClipboard: (text: string) =\u003e Promise\u003cboolean\u003e]`\n\n### `useClipboardListener`\n\nListens for copy/paste events  \n**Inputs:**\n\n- `onCopy?: (text: string) =\u003e void`\n- `onPaste?: (text: string) =\u003e void`\n\n**Outputs:**\n\n- None\n\n### `useMediaQuery`\n\nTracks media query matches  \n**Inputs:**\n\n- `query: string`\n\n**Outputs:**\n\n- `matches: boolean`\n\n### `usePrefersReducedMotion`\n\nDetects reduced motion preference  \n**Inputs:**\n\n- None\n\n**Outputs:**\n\n- `prefersReduced: boolean`\n\n### `useNetworkStatus`\n\nTracks network information  \n**Inputs:**\n\n- None\n\n**Outputs:**\n\n- `{ effectiveType: string; rtt: number; downlink: number; saveData: boolean }`\n\n### `useIdleTimeout`\n\nTriggers callback after inactivity  \n**Inputs:**\n\n- `callback: () =\u003e void`\n- `timeout?: number`\n\n**Outputs:**\n\n- None\n\n---\n\n## Forms\n\n### `useInputValidation`\n\nManages form input validation  \n**Inputs:**\n\n- `initialValue?: string`\n- `rules?: { required?: boolean; minLength?: number; maxLength?: number; pattern?: RegExp; validate?: (value: string) =\u003e boolean }`\n\n**Outputs:**\n\n- `{ value: string; setValue: React.Dispatch\u003cReact.SetStateAction\u003cstring\u003e\u003e; onChange: (e: React.ChangeEvent\u003cHTMLInputElement\u003e) =\u003e void; onBlur: () =\u003e void; errors: string[]; isValid: boolean; dirty: boolean; validate: () =\u003e boolean; reset: () =\u003e void }`\n\n---\n\n## Performance\n\n### `useDeepCompareEffect`\n\n`useEffect` with deep comparison  \n**Inputs:**\n\n- `effect: React.EffectCallback`\n- `dependencies: any[]`\n\n**Outputs:**\n\n- None (side-effect only)\n\n### `useThrottle`\n\nThrottles function execution  \n**Inputs:**\n\n- `func: T`\n- `wait: number`\n- `options?: { leading?: boolean; trailing?: boolean }`\n\n**Outputs:**\n\n- `throttledFunction: (...args: Parameters\u003cT\u003e) =\u003e void`\n\n### `useThrottleEvent`\n\nThrottles event listeners  \n**Inputs:**\n\n- `eventName: string`\n- `callback: T`\n- `throttleTime: number`\n- `element?: HTMLElement | Window | Document`\n\n**Outputs:**\n\n- None\n\n### `useEventCallback`\n\nStable callback reference  \n**Inputs:**\n\n- `fn: T`\n\n**Outputs:**\n\n- `stableFn: T`\n\n---\n\n## Animation \u0026 Media\n\n### `useBezierEase`\n\nCreates cubic Bézier easing function  \n**Inputs:**\n\n- `p1x: number`\n- `p1y: number`\n- `p2x: number`\n- `p2y: number`\n\n**Outputs:**\n\n- `easingFunction: (t: number) =\u003e number`\n\n---\n\n## Networking\n\n### `useFetchWithCache`\n\nFetches data with caching  \n**Inputs:**\n\n- `url: string`\n- `options?: AxiosRequestConfig`\n- `cacheKey?: string`\n\n**Outputs:**\n\n- `{ data: T | null; loading: boolean; error: Error | null; refresh: () =\u003e void }`\n\n### `useScriptLoader`\n\nLoads external scripts  \n**Inputs:**\n\n- `src: string`\n- `options?: { async?: boolean; defer?: boolean; attributes?: Record\u003cstring, string\u003e }`\n\n**Outputs:**\n\n- `status: 'loading' | 'ready' | 'error'`\n\n### `preloadScript`\n\nPreloads scripts immediately (at module level)  \n**Inputs:**\n\n- `src: string`\n- `options?: { async?: boolean; defer?: boolean; attributes?: Record\u003cstring, string\u003e }`\n\n**Outputs:**\n\n- None\n\n---\n\n## Error Handling\n\n### `useErrorBoundary`\n\nCatches component errors  \n**Inputs:**\n\n- None\n\n**Outputs:**\n\n- `{ throwError: (error: Error) =\u003e void, resetError: () =\u003e void, ErrorBoundary: React.FC\u003c{ children: ReactNode; fallback: ReactNode }\u003e, error: Error | null }`\n\n---\n\n## Miscellaneous\n\n### `useEventListener`\n\nAttaches event listeners  \n**Inputs:**\n\n- `eventType: K`\n- `handler: (event: WindowEventMap[K]) =\u003e void`\n- `element?: Window | Document`\n- `options?: AddEventListenerOptions`\n\n**Outputs:**\n\n- None\n\n### `useEventEmitter`\n\nCreates event emitter  \n**Inputs:**\n\n- None\n\n**Outputs:**\n\n- `{ emit: (data: T) =\u003e void, subscribe: (listener: (data: T) =\u003e void) =\u003e () =\u003e void }`\n\n### `useIsClient`\n\nDetect if in server or client\n**Inputs:**\n\n- None\n\n**Outputs:**\n\n- `isClient: boolean`\n\n---\n\n# V2 Set\n\n---\n\n## State Management\n\n### `useToggle`\n\nToggle between boolean states  \n**Inputs:**\n\n- `initialValue?`: boolean (default: false)\n\n**Outputs:**\n\n- `[state: boolean, toggle: () =\u003e void, setState: React.Dispatch\u003cboolean\u003e]`\n\n### `useCounter`\n\nManage numeric values  \n**Inputs:**\n\n- `initialValue?`: number (default: 0)\n- `options?`: { min?: number; max?: number; step?: number }\n\n**Outputs:**\n\n- `{ value: number, increment: () =\u003e void, decrement: () =\u003e void, reset: () =\u003e void, set: (value: number) =\u003e void }`\n\n### `useMap`\n\nManage key-value pairs  \n**Inputs:**\n\n- `initialEntries?`: Iterable\u003c[K, V]\u003e\n\n**Outputs:**\n\n- `Map-like object with { size, get, set, delete, clear, entries, keys, values }`\n\n### `useSet`\n\nHandle unique collections  \n**Inputs:**\n\n- `initialValues?`: Iterable\u003cT\u003e\n\n**Outputs:**\n\n- `Set-like object with { size, has, add, delete, clear }`\n\n### `useArray`\n\nEnhanced array operations  \n**Inputs:**\n\n- `initialValue?`: T[]\n\n**Outputs:**\n\n- `{ value: T[], push: (...items: T[]) =\u003e void, pop: () =\u003e void, shift: () =\u003e void, unshift: (...items: T[]) =\u003e void, update: (index: number, item: T) =\u003e void, remove: (index: number) =\u003e void, filter: (predicate: (value: T) =\u003e boolean) =\u003e void, clear: () =\u003e void }`\n\n### `useCookieState`\n\nSync state with cookies  \n**Inputs:**\n\n- `key`: string\n- `initialValue`: T\n\n**Outputs:**\n\n- `[value: T, setValue: (value: T, options?: CookieOptions) =\u003e void]`\n\n### `useSessionStorageState`\n\nPersist state in sessionStorage  \n**Inputs:**\n\n- `key`: string\n- `initialValue`: T | (() =\u003e T)\n\n**Outputs:**\n\n- `[value: T, setValue: React.Dispatch\u003cReact.SetStateAction\u003cT\u003e\u003e]`\n\n### `useQueue`\n\nFIFO (First-In-First-Out) data structure  \n**Inputs:**\n\n- `initialItems?`: T[]\n\n**Outputs:**\n\n- `{ items: T[], size: number, isEmpty: boolean, enqueue: (item: T) =\u003e void, dequeue: () =\u003e T | undefined, peek: () =\u003e T | undefined, clear: () =\u003e void }`\n\n### `useStack`\n\nLIFO (Last-In-First-Out) data structure  \n**Inputs:**\n\n- `initialItems?`: T[]\n\n**Outputs:**\n\n- `{ items: T[], size: number, isEmpty: boolean, push: (item: T) =\u003e void, pop: () =\u003e T | undefined, peek: () =\u003e T | undefined, clear: () =\u003e void }`\n\n### `useConditionalState`\n\nConditionally prevent state updates  \n**Inputs:**\n\n- `initialValue`: T\n- `condition`: boolean (when true, prevents state updates)\n\n**Outputs:**\n\n- `[state: T, setConditionalState: React.Dispatch\u003cReact.SetStateAction\u003cT\u003e\u003e]`\n\n### `useKeyPress`\n\nTrack keyboard key presses  \n**Inputs:**\n\n- `targetKey`: string | string[] (key or array of keys to track)\n\n**Outputs:**\n\n- `keyPressed: boolean` (true when any target key is pressed)\n\n---\n\n## UI \u0026 DOM\n\n### `useFocus`\n\nTrack element focus state  \n**Inputs:** None\n\n**Outputs:**\n\n- `[ref: RefObject\u003cElement\u003e, isFocused: boolean, focus: () =\u003e void]`\n\n### `useFocusWithin`\n\nDetect if focus is within container  \n**Inputs:** None\n\n**Outputs:**\n\n- `[ref: RefObject\u003cElement\u003e, isFocusWithin: boolean]`\n\n### `useLongPress`\n\nDetect long-press gestures with movement cancellation  \n**Inputs:**\n\n- `callback`: () =\u003e void (function to execute on long press)\n- `duration?`: number = 500 (ms, time required to trigger long press)\n\n**Outputs:**\n\n- `Event handlers object`: {\n  onMouseDown: (e: React.MouseEvent) =\u003e void,\n  onMouseUp: () =\u003e void,\n  onMouseLeave: () =\u003e void,\n  onTouchStart: (e: React.TouchEvent) =\u003e void,\n  onTouchEnd: () =\u003e void,\n  onTouchMove: (e: React.TouchEvent) =\u003e void\n  }\n\n**\\*\\*Must include \"// @ts-ignore\" before using handlers if use TS**\n\n### `useDrag`\n\nHandle drag operations  \n**Inputs:** None\n\n**Outputs:**\n\n- `{ dragRef: RefObject\u003cElement\u003e, isDragging: boolean, handleMouseDown: (e: React.MouseEvent) =\u003e void }`\n\n### `useDrop`\n\nCreate drop targets  \n**Inputs:**\n\n- `onDrop: (item: T) =\u003e void`\n\n**Outputs:**\n\n- `[ref: RefObject\u003cElement\u003e, isOver: boolean, isDropped: boolean]`\n\n### `useFullscreen`\n\nControl fullscreen mode  \n**Inputs:** None\n\n**Outputs:**\n\n- `[ref: RefObject\u003cElement\u003e, isFullscreen: boolean, enter: () =\u003e void, exit: () =\u003e void]`\n\n### `useElementSize`\n\nTrack element dimensions  \n**Inputs:** None\n\n**Outputs:**\n\n- `[ref: RefObject\u003cElement\u003e, size: { width: number; height: number }]`\n\n### `useViewportPosition`\n\nTrack element position in viewport  \n**Inputs:** None\n\n**Outputs:**\n\n- `[ref: RefObject\u003cElement\u003e, position: { top: number; left: number; visibleRatio: number }]`\n\n### `useMousePosition`\n\nTrack mouse coordinates  \n**Inputs:** None\n\n**Outputs:**\n\n- `{ x: number; y: number }`\n\n### `useScrollDirection`\n\nDetect scroll direction  \n**Inputs:**\n\n- `threshold?`: number\n\n**Outputs:**\n\n- `'up' | 'down' | null`\n\n### `useCssVariable`\n\nGet/set CSS custom properties  \n**Inputs:**\n\n- `name`: string\n- `element?`: HTMLElement | null\n\n**Outputs:**\n\n- `[value: string | null, setVariable: (value: string) =\u003e void]`\n\n### `useBreakpoint`\n\nTrack responsive breakpoints  \n**Inputs:**\n\n- `breakpoints?`: Record\u003cstring, number\u003e\n\n**Outputs:**\n\n- `currentBreakpoint: string`\n\n### `useLockBodyScroll`\n\nPrevent body scrolling  \n**Inputs:**\n\n- `lock?`: boolean\n\n**Outputs:** None (side-effect only)\n\n---\n\n## Async Operations\n\n### `useRetry`\n\nRetry failed async operations  \n**Inputs:**\n\n- `asyncFn: () =\u003e Promise\u003cT\u003e`\n- `options?`: { retries?: number; retryDelay?: number; onSuccess?: (data: T) =\u003e void; onError?: (error: Error) =\u003e void }\n\n**Outputs:**\n\n- `{ data: T | null, error: Error | null, loading: boolean, attempt: () =\u003e Promise\u003cvoid\u003e, retry: () =\u003e void }`\n\n### `useConcurrentRequests`\n\nManage parallel async tasks  \n**Inputs:**\n\n- `requests: (() =\u003e Promise\u003cT\u003e)[]`\n- `options?`: { maxConcurrent?: number; onComplete?: (results: T[]) =\u003e void }\n\n**Outputs:**\n\n- `{ results: T[], errors: Error[], loading: boolean, progress: number, retry: () =\u003e void }`\n\n### `useInterval`\n\nManaged interval timer  \n**Inputs:**\n\n- `callback: () =\u003e void`\n- `delay`: number | null\n- `options?`: { immediate?: boolean }\n\n**Outputs:** None (side-effect only)\n\n### `useCountdown`\n\nCountdown timer implementation  \n**Inputs:**\n\n- `initialSeconds`: number\n- `options?`: { autoStart?: boolean; onComplete?: () =\u003e void; interval?: number }\n\n**Outputs:**\n\n- `{ seconds: number, isRunning: boolean, start: () =\u003e void, pause: () =\u003e void, reset: () =\u003e void, formatted: string }`\n\n---\n\n## Browser APIs\n\n### `useBatteryStatus`\n\nAccess battery information  \n**Inputs:** None\n\n**Outputs:**\n\n- `{ level: number, charging: boolean, chargingTime: number, dischargingTime: number } | null`\n\n### `useGeolocation`\n\nTrack geographical location  \n**Inputs:**\n\n- `options?`: PositionOptions\n\n**Outputs:**\n\n- `{ latitude: number | null, longitude: number | null, accuracy: number | null, error: GeolocationPositionError | null, timestamp: number | null }`\n\n### `useDeviceOrientation`\n\nDetect device tilt  \n**Inputs:** None\n\n**Outputs:**\n\n- `{ alpha: number | null, beta: number | null, gamma: number | null, absolute: boolean | null }`\n\n### `useMotion`\n\nAccess device motion data  \n**Inputs:** None\n\n**Outputs:**\n\n- `{ acceleration: { x: number | null; y: number | null; z: number | null }, accelerationIncludingGravity: { x: number | null; y: number | null; z: number | null }, rotationRate: { alpha: number | null; beta: number | null; gamma: number | null }, interval: number | null }`\n\n### `usePreferredLanguage`\n\nGet browser language  \n**Inputs:** None\n\n**Outputs:**\n\n- `language: string`\n\n### `usePrint`\n\nDetect print dialog events  \n**Inputs:** None\n\n**Outputs:**\n\n- `isPrinting: boolean`\n\n### `useWakeLock`\n\nPrevent screen sleep  \n**Inputs:** None\n\n**Outputs:**\n\n- `{ isSupported: boolean, isActive: boolean, request: () =\u003e Promise\u003cvoid\u003e, release: () =\u003e void }`\n\n---\n\n## Forms\n\n### `useForm`\n\nComprehensive form management  \n**Inputs:**\n\n- `options`: {\n  initialValues: T;\n  validate?: { [K in keyof T]?: (value: T[K], values: T) =\u003e string | null };\n  onSubmit: (values: T) =\u003e void | Promise\u003cvoid\u003e;\n  }\n\n**Outputs:**\n\n- `{ values: T; errors: Record\u003ckeyof T, string | null\u003e; touched: Record\u003ckeyof T, boolean\u003e; isSubmitting: boolean; isValid: boolean; handleChange: \u003cK extends keyof T\u003e(field: K, value: T[K]) =\u003e void; handleBlur: (field: keyof T) =\u003e void; handleSubmit: (e?: React.FormEvent) =\u003e Promise\u003cvoid\u003e; resetForm: () =\u003e void; setFieldValue: \u003cK extends keyof T\u003e(field: K, value: T[K]) =\u003e void; setFieldTouched: (field: keyof T) =\u003e void; }`\n\n### `useField`\n\nManage individual form fields  \n**Inputs:**\n\n- `initialValue`: T\n- `options?`: { validate?: (value: T) =\u003e string | null }\n\n**Outputs:**\n\n- `{ value: T, error: string | null, touched: boolean, onChange: (e: React.ChangeEvent) =\u003e void, onBlur: (e: React.FocusEvent) =\u003e void, setValue: (value: T) =\u003e void, setTouched: (touched: boolean) =\u003e void }`\n\n---\n\n## Performance\n\n### `useMemoCompare`\n\nMemoize with custom comparison  \n**Inputs:**\n\n- `value`: T\n- `compare`: (prev: T | undefined, current: T) =\u003e boolean\n\n**Outputs:**\n\n- `memoizedValue: T`\n\n### `useDebounceCallback`\n\nDebounce function calls  \n**Inputs:**\n\n- `callback`: (...args: any[]) =\u003e void\n- `delay`: number (ms)\n- `options?`: { leading?: boolean; trailing?: boolean }\n\n**Outputs:**\n\n- `debouncedFunction: (...args: any[]) =\u003e void`\n\n### `useRaf`\n\nRun logic on requestAnimationFrame  \n**Inputs:**\n\n- `callback`: (time: DOMHighResTimeStamp) =\u003e void\n\n**Outputs:**\n\n- `{ start: () =\u003e void, stop: () =\u003e void, toggle: () =\u003e void, isRunning: boolean }`\n\n### `useIsFirstRender`\n\nDetect initial render  \n**Inputs:** None\n\n**Outputs:**\n\n- `isFirstRender: boolean`\n\n### `useRenderCount`\n\nTrack render count  \n**Inputs:** None\n\n**Outputs:**\n\n- `count: number`\n\n### `useUpdateEffect`\n\nRun effect only on updates (skips initial render)  \n**Inputs:**\n\n- `effect`: React.EffectCallback (effect to run on updates)\n- `deps?`: React.DependencyList = [] (optional dependency array)\n\n**Outputs:** None (side-effect hook)\n\n### `useIsomorphicEffect`\n\nUniversal effect for SSR  \n**Inputs:** None\n\n**Outputs:**\n\n- `React.EffectCallback` (useLayoutEffect client-side, useEffect server-side)\n\n### `useDeepCompareCallback`\n\nMemoize callbacks with deep comparison  \n**Inputs:**\n\n- `callback`: T\n- `dependencies`: any[]\n\n**Outputs:**\n\n- `memoizedCallback: T`\n\n---\n\n## Networking\n\n### `useFetch`\n\nSimplified data fetching  \n**Inputs:**\n\n- `url`: string\n- `options?`: AxiosRequestConfig\n\n**Outputs:**\n\n- `{ data: any, loading: boolean, error: Error | null, abort: () =\u003e void, refetch: () =\u003e void }`\n\n### `useWebSocket`\n\nManage WebSocket connections  \n**Inputs:**\n\n- `url`: string\n- `options?`: { onOpen?: (event: Event) =\u003e void; onClose?: (event: CloseEvent) =\u003e void; onError?: (event: Event) =\u003e void; reconnect?: boolean; reconnectInterval?: number }\n\n**Outputs:**\n\n- `{ data: any, send: (data: any) =\u003e void, readyState: number, lastMessage: MessageEvent | null, connect: () =\u003e void, disconnect: () =\u003e void }`\n\n---\n\n## Miscellaneous\n\n### `useMutationObserver`\n\nObserve DOM mutations  \n**Inputs:**\n\n- `target`: Element\n- `callback`: MutationCallback\n- `options?`: MutationObserverInit\n\n**Outputs:**\n\n- `{ disconnect: () =\u003e void, takeRecords: () =\u003e MutationRecord[] }`\n\n### `useLogger`\n\nLog component lifecycle  \n**Inputs:**\n\n- `componentName`: string\n- `props?`: Record\u003cstring, any\u003e\n\n**Outputs:** None (console logging)\n\n### `useRandomId`\n\nGenerate accessible unique IDs  \n**Inputs:**\n\n- `prefix?`: string\n\n**Outputs:**\n\n- `id: string`\n\n---\n\n# V3 Set\n\n## Simulation \u0026 Effects\n\n### `useGravityEffect`\n\nSimulates gravity on elements using CSS transforms  \n**Inputs:**\n\n- `ref`: RefObject\u003cElement\u003e\n- `options?`: `{ gravity?: number }`\n\n**Outputs:**\n\n- `cleanup: () =\u003e void`\n\n### `useWindBlower`\n\nApplies wind animation to elements  \n**Inputs:**\n\n- `ref`: RefObject\u003cElement\u003e\n- `options?`: `{ direction?: 'left' | 'right' | 'up' | 'down'; intensity?: number }`\n\n**Outputs:**\n\n- `cleanup: () =\u003e void`\n\n### `useDimensionShift`\n\nApplies 3D transformation to elements  \n**Inputs:**\n\n- `ref`: RefObject\u003cElement\u003e\n- `options?`: `{ rotateX?: number; rotateY?: number; perspective?: number }`\n\n**Outputs:**\n\n- `cleanup: () =\u003e void`\n\n### `useDreamSequence`\n\nApplies surreal floating and blur animations  \n**Inputs:**\n\n- `ref`: RefObject\u003cElement\u003e\n- `intensity?`: number (0–1)\n\n**Outputs:**\n\n- `stop: () =\u003e void`\n\n### `useRetroFilter`\n\nApplies vintage filters like sepia/pixelate  \n**Inputs:**\n\n- `ref`: RefObject\u003cElement\u003e\n- `filter`: `'sepia' | 'pixelate' | 'scanlines'`\n\n**Outputs:**\n\n- `cleanup: () =\u003e void`\n\n### `useEmojiRain`\n\nCreates falling emoji animations  \n**Inputs:**\n\n- `ref`: RefObject\u003cElement\u003e\n- `emojiList`: string[]\n- `speed?`: number (default: 20)\n\n**Outputs:**\n\n- `cleanup: () =\u003e void`\n\n---\n\n## AI \u0026 Prediction\n\n### `useMindReader`\n\nPredicts user's next action based on patterns  \n**Inputs:**\n\n- `windowEventTarget?: Window` (default: window)\n\n**Outputs:**\n\n- `Array\u003c{ action: string; confidence: number }\u003e`\n\n### `useAICompanion`\n\nConnects to AI API for chatbot-like interactions  \n**Inputs:**\n\n- `endpoint`: string\n\n**Outputs:**\n\n- `{ conversation: Message[], send: (text: string) =\u003e void }`\n\n---\n\n## Time Control\n\n### `useTimeFreeze`\n\nReturns frozen value when freeze is true, otherwise returns current value  \n**Inputs:**\n\n- `value`: T (current value)\n- `freeze`: boolean (when true, returns previous value)\n\n**Outputs:**\n\n- `frozenValue`: T (either current or previous value based on freeze state)\n\n### `useChronoDrift`\n\nApplies slow movement to elements over time  \n**Inputs:**\n\n- `ref`: RefObject\u003cElement\u003e\n- `duration`: number (in seconds)\n\n**Outputs:**\n\n- `stop: () =\u003e void`\n\n---\n\n## Themed UI \u0026 Environment\n\n### `useWeatherTheme`\n\nAdjusts app theme based on real-time weather  \n**Inputs:**\n\n- `apiKey`: string (your OpenWeatherMap API key)\n- `location`: string\n\n**Outputs:**\n\n- `theme: { type: string; colors: { background: string; text: string } }`\n\n### `useMoodLighting`\n\nChanges UI lighting based on mood  \n**Inputs:**\n\n- `mood: 'happy' | 'sad' | 'angry' | 'calm' | 'excited' | 'neutral' | 'surprised' | 'fearful' | 'disgusted' | 'contempt' | 'bored' | 'confused' | 'embarrassed' | 'proud' | 'ashamed' | 'jealous' | 'guilty' | 'grateful' | 'hopeful' | 'lonely' | 'loved' | 'optimistic' | 'pessimistic' | 'relaxed' | 'stressed' | 'focused' | 'tired' | 'energetic' | 'creative' | 'nostalgic' | 'romantic' | 'adventurous' | 'confident' | 'anxious' | 'playful' | 'serious' | 'curious' | 'determined' | 'peaceful' | 'melancholic' | 'euphoric' | 'indifferent' | 'inspired' | 'overwhelmed' | 'satisfied' | 'disappointed'`\n\n**Outputs:**\n\n- `{ background: string; color: string }`\n\n### `useSmelloscope`\n\nSimulates \"smell\" through UI metaphors  \n**Inputs:**\n\n- `scent: string`\n- `customScentMap?: Record\u003cstring, string\u003e`\n\n**Outputs:**\n\n- `description: string`\n\n---\n\n## Space \u0026 Movement\n\n### `useQuantumLeap`\n\nTeleports elements to random positions  \n**Inputs:**\n\n- `bounds: { xMin: number; xMax: number; yMin: number; yMax: number }`\n\n**Outputs:**\n\n- `{ pos: { x: number; y: number }, leap: () =\u003e void }`\n\n### `useHologram`\n\nApplies holographic 3D look  \n**Inputs:**\n\n- `ref`: RefObject\u003cElement\u003e\n- `options?`: `{ rotation?: number; depth?: number }`\n\n**Outputs:**\n\n- `cleanup: () =\u003e void`\n\n### `useGalaxyBackground`\n\nRenders animated galaxy/star background  \n**Inputs:**\n\n- `canvasRef`: RefObject\u003cHTMLCanvasElement\u003e\n\n**Outputs:**\n\n- `cleanup: () =\u003e void`\n\n---\n\n## Fantasy \u0026 Surprise\n\n### `useConfettiSurprise`\n\nTriggers confetti animation on event  \n**Inputs:**\n\n- `trigger: boolean`\n\n**Outputs:**\n\n- `renderConfetti: () =\u003e JSX.Element`\n\n### `useRandomFortune`\n\nDisplays random fortunes or quotes  \n**Inputs:** None\n\n**Outputs:**\n\n- `fortune: string`\n\n### `useQuantumDice`\n\nGenerates unpredictable quantum number  \n**Inputs:**\n\n- `sides: number`\n\n**Outputs:**\n\n- `roll: () =\u003e Promise\u003cnumber\u003e`\n\n---\n\n## Meta / Hook Utilities\n\n### `useHookManager`\n\nOrchestrates multiple hooks together  \n**Inputs:**\n\n- `hooks: Array\u003c() =\u003e any\u003e`\n\n**Outputs:**\n\n- `Array of hook return values`\n\n### `useHookDebugger`\n\nLogs hook updates and internal state  \n**Inputs:**\n\n- `label: string`\n- `value: any`\n\n**Outputs:** None\n\n---\n\n## UI Behavior \u0026 Interactions\n\n### `useGhostMode`\n\nRandomly fades elements in/out  \n**Inputs:**\n\n- `ref`: RefObject\u003cElement\u003e\n\n**Outputs:**\n\n- `cleanup: () =\u003e void`\n\n### `useMirrorWorld`\n\nFlips UI horizontally or vertically  \n**Inputs:** None\n\n**Outputs:**\n\n- `{ style: React.CSSProperties; flipX: () =\u003e void; flipY: () =\u003e void }`\n\n### `useParallelUniverse`\n\nManages multiple state branches  \n**Inputs:**\n\n- `initialValue: T`\n\n**Outputs:**\n\n- `{ branches: T[][]; fork: (index: number, value: T) =\u003e void }`\n\n### `useTeleportButton`\n\nMakes buttons dodge the mouse  \n**Inputs:**\n\n- `ref`: RefObject\u003cHTMLButtonElement\u003e\n- `options?`: `{ distance?: number }`\n\n**Outputs:** None\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaarnn%2Fhoxa","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftaarnn%2Fhoxa","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaarnn%2Fhoxa/lists"}