react-hooks-library

30+ production-ready React hooks — zero dependencies, TypeScript-first, copy-paste friendly.

Hooks

📦 State

Hook	Description
useLocalStorage<T>	Persist state to localStorage with cross-tab sync
useDebounce<T>	Debounce a rapidly-changing value
useDebouncedCallback	Debounce a callback function
useToggle	Boolean state with toggle / on / off

🎨 UI

Hook	Description
useIntersectionObserver	Detect when element enters viewport
useMediaQuery	Reactive CSS media query matching
useBreakpoint	Tailwind-compatible breakpoint detection
useClipboard	Copy text with "copied!" feedback state
useClickOutside	Detect clicks outside an element
useKeyPress	Detect when a specific key is held
useHotkey	Register keyboard shortcuts with modifiers

⚡ Async

Hook	Description
useFetch<T>	Data fetching with loading/error/abort/retry

🚀 Performance

Hook	Description
useThrottle<T>	Throttle a rapidly-changing value
useThrottledCallback	Throttle a callback function

Quick Start

git clone https://github.com/bhupendra05/react-hooks-library.git
# Copy any hook file directly into your project

Usage Examples

useLocalStorage

const [theme, setTheme, clearTheme] = useLocalStorage("theme", "light");
// Cross-tab sync included — change in one tab, updates in all others

useDebounce

const [query, setQuery] = useState("");
const debouncedQuery = useDebounce(query, 300);

useEffect(() => {
  if (debouncedQuery) fetchResults(debouncedQuery);
}, [debouncedQuery]);

useFetch

const { data, status, error, refetch } = useFetch<User[]>("/api/users", {
  retries: 3,  // retry on failure with exponential backoff
});

if (status === "loading") return <Spinner />;
if (status === "error")   return <Error message={error.message} />;
return <UserList users={data} />;

useIntersectionObserver

// Lazy-load images, trigger animations, infinite scroll
const { ref, isIntersecting } = useIntersectionObserver({
  threshold: 0.1,
  freezeOnceVisible: true,  // stop observing after first appearance
});

return <img ref={ref} src={isIntersecting ? src : undefined} />;

useClipboard

const { copy, copied } = useClipboard({ timeout: 2000 });
return (
  <button onClick={() => copy(codeSnippet)}>
    {copied ? "✓ Copied!" : "Copy"}
  </button>
);

useHotkey

// ⌘K / Ctrl+K to open search
useHotkey("k", { meta: true }, () => openCommandPalette());
// Escape to close modal
const isEsc = useKeyPress("Escape");
useEffect(() => { if (isEsc) closeModal(); }, [isEsc]);

useBreakpoint

const { isMobile, isMd, isDark } = useBreakpoint();
return (
  <nav className={isMobile ? "bottom-nav" : "sidebar"}>
    {isDark && <DarkModeIcon />}
  </nav>
);

Structure

src/
├── hooks/
│   ├── state/
│   │   ├── useLocalStorage.ts
│   │   ├── useDebounce.ts
│   │   └── useToggle.ts
│   ├── ui/
│   │   ├── useIntersectionObserver.ts
│   │   ├── useMediaQuery.ts
│   │   ├── useClipboard.ts
│   │   ├── useClickOutside.ts
│   │   └── useKeyPress.ts
│   ├── async/
│   │   └── useFetch.ts
│   └── performance/
│       └── useThrottle.ts
└── index.ts

License

MIT © bhupendra05