usehooks-ts

usehooks-ts is a React hooks library written entirely in TypeScript that packages the most common client-side patterns into a single, dependency-light import. It ships more than thirty focused hooks covering boolean and counter state, localStorage and sessionStorage persistence, media queries, event listeners, intersection and resize observers, debouncing, dark mode, and more.

The library is designed to be minimal and fully tree-shakable through its ESM build, so you only pay for the hooks you actually import. Each hook is strongly typed, documented with JSDoc, and covered by tests, making it a low-risk way to avoid re-writing the same boilerplate across React projects.

What You Get

• 30+ typed React hooks importable individually from a single package
• Full TypeScript type inference on every hook’s arguments and return values
• SSR-friendly hooks with options like initializeWithValue for safe hydration
• A tree-shakable ESM build so only the hooks you import are bundled
• Extensive JSDoc documentation and a companion docs site with live examples

Common Use Cases

• Persisting UI state across reloads with useLocalStorage or useSessionStorage
• Building responsive layouts and theming with useMediaQuery and useDarkMode
• Wiring up DOM interactions via useEventListener, useHover, and useOnClickOutside
• Throttling expensive updates with useDebounceValue or useDebounceCallback
• Tracking element visibility and size with useIntersectionObserver and useResizeObserver

Under The Hood

Architecture — The library is a pnpm + Turborepo monorepo whose publishable surface is the packages/usehooks-ts package. Its src/index.ts is a flat barrel that re-exports one directory per hook (useBoolean, useLocalStorage, useMediaQuery, and 30+ more), so each hook is an isolated module with its own implementation and colocated *.test.ts file. Hooks compose internally rather than duplicating logic — for example useLocalStorage builds on useEventCallback and useEventListener, and dispatches a custom local-storage window event to keep every consumer of a key in sync across components and tabs.

Tech Stack — Written in TypeScript (~90% of the codebase) targeting React 16.8+ through 19 via a broad peerDependencies range. The only runtime dependency is lodash.debounce. It is bundled with tsup (esbuild) into dual ESM/CJS outputs with generated .d.ts types and sideEffects: false for tree-shaking. Tests run on Vitest against a jsdom environment with Testing Library, and the repo uses Turborepo, changesets for releases, TypeDoc for docs generation, and ESLint including a tree-shaking lint plugin.

Code Quality — Quality is high: nearly every hook ships a dedicated Vitest suite (29 test files across 33 hooks), and each public hook carries thorough JSDoc with parameter docs, @example blocks, and links to the docs site. SSR safety is handled explicitly through an IS_SERVER guard and opt-in initializeWithValue options rather than left to the caller. Naming is consistent and idiomatic, and generics preserve full type inference on return tuples.

API Design — The developer experience is a core strength. Every hook is imported by name from the package root, follows React’s own tuple/return conventions, and requires almost no boilerplate to adopt (const [value, setValue] = useLocalStorage('key', 0)). Options objects are optional with sensible defaults, the public API is uniform across the whole set, and each hook maps to a documented page with live examples, giving a very shallow learning curve for React developers.