$ show antonioru/beautiful-react-hooks
beautiful-react-hooks is a TypeScript library providing a collection of over 50 reusable, well-tested custom React hooks for common patterns such as lifecycle management, event handling (mouse, touch, swipe, drag, resize, scroll), geolocation, media queries, local/session storage, debounce/throttle, timers, animations, and more. The architecture is clean and modular: each hook is a standalone file with its own TypeScript types, unit tests, and documentation. Shared utilities (SSR detection, API support checks, warning helpers) are separated into a shared module, and a factory pattern is used to create storage hooks. The library supports tree-shaking via per-hook imports and provides both CommonJS and ES module builds. It also includes a comprehensive styleguidist documentation site with interactive examples. The code demonstrates strong engineering practices: proper handling of SSR, browser API availability checks, cleanup logic in useEffect, and memoization to avoid unnecessary re-renders. Peer dependencies (rxjs, react-router-dom) are required only for specific hooks, keeping the core lightweight.
The LLM identified 4 files worth highlighting for reuse:
A factory function that generates hooks for both localStorage and sessionStorage. It handles SSR gracefully by returning a noop, checks for browser API support, parse JSON safely, and provides a stable setter reference via useCallback. The pattern of creating parameterized hooks from a factory is reusable for other storage-like abstractions (e.g., IndexedDB, cookies). It is self-contained and demonstrates how to build hooks that work consistently across client and server environments.
A tiny utility that wraps console.warn to ensure a message is only displayed once per session. It uses a Map to cache messages and avoid spam in development logs. This pattern is directly reusable in any project that needs to emit non-critical warnings without flooding the console, and it is a clean example of memoization for side effects.
A hook that detects swipe gestures (direction, alpha, count) on a target element or globally. It unifies mouse and touch events, supports configurable direction (horizontal/vertical/both), threshold, and prevents default behavior. The internal state management and comparison logic minimize unnecessary re-renders. This is a sophisticated example of composing multiple low-level event hooks (useMouseEvents, useTouchEvents) into a higher-level gesture abstraction, and it can be extracted for any swipe-based UI.
A hook that runs a function repeatedly via requestAnimationFrame with progress tracking (startAt, finishAt, increment). It provides an onFinish callback setter. The animation loop is started when the hook mounts and can be stopped by reaching the finishAt value or set to infinite with -1. It gracefully handles SSR by returning a noop. This demonstrates a clean pattern for managing animation frames within React's lifecycle, and the progress callback pattern can be reused for other frame-based animations.