React Navigation Hooks

Haunted

React's Hooks API implemented for web components 👻

React Hanger

A collection of useful React hooks

Hooks test

This project showcases how React Hooks can simplify complex UI logic by breaking down a sophisticated canvas-based application into manageable, composable pieces. It addresses challenges like pan-and-zoom, keyboard handling, momentum scrolling, layout animations, and drag-and-drop coordination between canvas and React components. ## Key Features - **Canvas Interaction Management** — Handles panning, zooming, and momentum scrolling for map-like interfaces. - **Keyboard Event Handling** — Manages keyboard inputs within the canvas context. - **Layout Animation Coordination** — Synchronizes layout changes with map positioning to keep elements stable. - **Drag-and-Drop Integration** — Supports dragging between canvas and React components using react-dnd. - **Composable Logic** — Demonstrates how hooks enable splitting complex logic into small, reusable functions. ## Philosophy The project illustrates how React Hooks promote cleaner code architecture by replacing tightly coupled, thousand-line components with focused, composable functions that are easier to understand and maintain.

React Hooks

React Hooks useState() and useEffect()