$ show kitze/react-hanger
A collection of custom React hooks for managing state of primitive types (boolean, number, array, map, set, input) and providing utility hooks (script loading, analytics, click outside, etc.). The library offers two APIs: object destructuring (original) and array destructuring (recommended). The array-based hooks are optimized for stable action references via `useCallback` and `useMemo`, reducing unnecessary re-renders. Includes comprehensive tests with `@testing-library/react-hooks` and full TypeScript types. The code is well-structured, follows React hooks best practices, and demonstrates non-obvious patterns like hook composition (`useBindToInput`) and event handling with blacklist options (`useClickOutside`).
The LLM identified 5 files worth highlighting for reuse:
Implements a boolean state hook returning `[value, actions]` tuple with stable action references (`toggle`, `setTrue`, `setFalse`) via `useCallback` and `useMemo`. This pattern ensures that the actions object does not change on re-render, preventing unnecessary prop recalculations and effects. The hook is a clean, reusable building block for any toggle or boolean state scenario.
A numeric state hook with configurable limits, loop behavior, and step size. Handles edge cases like upper/lower bounds, looping, and dynamic step override. The `increase` and `decrease` functions are memoized with `useCallback` and return stable references. This demonstrates a solid pattern for constrained numeric state in sliders, pagination, or counters.
A state hook for arrays providing a rich set of immutable operations: `push`, `unshift`, `pop`, `shift`, `clear`, `move`, `removeById`, `modifyById`, and `removeIndex`. The `move` function handles negative indices correctly. Actions are memoized for stable references. This is a reusable pattern for managing lists with CRUD and reordering, often used in todo apps, drag-and-drop interfaces, or dynamic form fields.
Provides a state hook for JavaScript `Set` with immutable update operations: `add`, `remove`, `clear`, and `setValue`. All mutation functions create a new `Set` copy, ensuring immutability and triggering re-renders correctly. The actions are memoized for stable references. This is a clean, reusable pattern for managing unique collections without external state management.
A composition hook that takes the result of `useInput` and returns enhanced bindings (`eventBind`, `valueBind`) for use with native inputs and custom components. Demonstrates the pattern of combining hooks to create higher-level abstractions. The bindings are memoized to avoid unnecessary re-renders. This is a reusable pattern for building form input libraries or controlled input components.