100+ Typed and Tested React Hooks You’ll Actually Use in Production

⚡ Stop reinventing the wheel! 100+ battle-tested React hooks for state, animations, network requests, and more – fully typed and production-ready.

📦 → npm install hoxa (visit the full documentation!)

⭐ → Star on GitHub (helps us grow!)

😩 The Hook Problem We All Face

// Sound familiar?

const useDebounce = (...) => { ... } 

// Copied from last project... again

How many hours have you wasted rewriting:

• useLocalStorage




• useFetchWithCache




• useWindowResize

🚀 Introducing Hoxa: Your Hook Toolkit

npm install hoxa

# or

yarn add hoxa

# or

bun add hoxa

100+ pre-built hooks covering:

• 🧠 State management




• 🌐 Network requests




• ⌚ Timers & animations




• 📦 Browser/DOM interactions




• 🔋 Utilities (throttle, clipboard, media queries...)

🧠 Why Hoxa?

• ✅ 100+ Custom React Hooks, with more coming in future updates
  


• 🧪 Every hook is tested and production-ready
  


• 🧩 Categorized for easy discovery
  


• 🪶 Lightweight and tree-shakable

All fully typed in TypeScript

✨ Real Usage Example

import { useLocalStorageState, useClickOutside } from "hoxa";

import { useState, type Ref } from "react";



export default function UserPanel() {

  const [theme, setTheme] = useLocalStorageState("theme", "dark");

  const [isMenuOpen, setIsMenuOpen] = useState(false);

  const dropdownRef = useClickOutside(() => setIsMenuOpen(false));



  return (

    <div ref={dropdownRef as Ref<HTMLDivElement>}>

      <button onClick={() => setIsMenuOpen(!isMenuOpen)}>Menu</button>

      {isMenuOpen && (

        <div>

          <ul>

            <li>

              <button>Profile</button>

            </li>

            <li>

              <button>Settings</button>

            </li>

            <li>

              <span>Dark Mode</span>

              <input

                type="checkbox"

                checked={theme === "dark"}

                onChange={(e) => setTheme(e.target.checked ? "dark" : "light")}

              />

            </li>

            <li>

              <button>Logout</button>

            </li>

          </ul>

        </div>

      )}

    </div>

  );

}

💡 Popular Hooks You’ll Use Daily

1. useLocalStorageState
   
   
   Persist state in localStorage + sync across tabs.
   
   
   → Ideal for user preferences, caching.




2. useDebouncedState
   
   
   Delay state updates until inactivity (e.g., search inputs).
   
   
   → Prevents excessive re-renders/API calls.




3. usePrevious
   
   
   Track previous value of state/props.
   
   
   → Essential for diff checks and animations.




4. useFetchWithCache
   
   
   Fetch data with built-in caching.
   
   
   → Optimizes network requests + reduces load times.




5. useClickOutside
   
   
   Detect clicks outside an element.
   
   
   → Critical for modals, dropdowns, popovers.




6. useHover
   
   
   Detect hover state on elements.
   
   
   → For tooltips, interactive cards, etc.




7. useIntersectionObserver
   
   
   Track element visibility in viewport.
   
   
   → Lazy-loading, scroll animations, analytics.




8. useElementSize
   
   
   Monitor element dimensions.
   
   
   → Responsive layouts, canvas rendering.




9. useDarkMode
   
   
   Manage dark/light theme with OS sync.
   
   
   → User experience cornerstone.




10. useDeepCompareEffect
    
    
    Optimize useEffect with deep equality checks.
    
    
    → Avoid unnecessary effect runs with complex objects.




11. useAsyncRetry
    
    
    Auto-retry failed async operations.
    
    
    → Robust error handling for flaky networks.




12. useThrottleEvent
    
    
    Rate-limit expensive events (scroll/resize).
    
    
    → Smooth performance for heavy UIs.




13. useForm
    
    
    Full-featured form state + validation.
    
    
    → Simplify complex forms without libraries.




14. useToggle
    
    
    Clean boolean state toggling.
    
    
    → Switches, accordions, checkboxes.




15. useOnlineStatus
    
    
    Detect browser connectivity.
    
    
    → Offline mode UX, sync warnings.

→ visit the full documentation

🙌 If you find Hoxa useful, please consider sharing it with your team or your dev community.

A single share helps this library grow and reach more React developers like you!