$ show sandiiarov/use-events
A library of custom React hooks for common DOM events, including hover, focus, click outside, touch, mouse position, window resize, and element resize via ResizeObserver. Each hook is an independent module that returns state and event handler bindings, following a consistent pattern of using `useMemo` for the bind object. The `useResizeObserver` hook demonstrates good lifecycle management by using `requestAnimationFrame` to debounce updates and cleaning up the observer. The `useClickOutside` hook supports multiple refs and properly cleans up event listeners. The library is built with TypeScript and uses the now-deprecated Pika build system for packaging. Tests are provided with Jest and React Testing Library. The codebase is simple and well-structured but has not seen active development since around 2020, and the build tooling is outdated.
The LLM identified 2 files worth highlighting for reuse:
A custom hook that tracks an element's width and height using the ResizeObserver API with a requestAnimationFrame throttle to avoid layout thrashing. It uses useRef for the animation frame ID, useLayoutEffect for setup and teardown, and handles edge cases like empty entries. This hook is self-contained, demonstrates proper cleanup of both the observer and the animation frame, and can be extracted into any React project that needs element resize detection.
A hook that detects clicks outside a set of referenced elements and calls a callback. It supports multiple refs, uses useCallback for memoized handlers, and cleans up event listeners on unmount. The hook returns a boolean state indicating whether a click outside occurred. It demonstrates a reusable pattern for event-driven interaction outside of a set of DOM nodes.