$ show BetterTyped/react-zoom-pan-pinch
react-zoom-pan-pinch is a production React library (npm package, zero runtime dependencies beyond React) that adds zoom, pan, and pinch interactions to arbitrary HTML content. In production, TransformWrapper mounts a ZoomPanPinch imperative core instance that registers DOM event listeners (wheel, touch/pointer, keyboard) and shares state via React context; TransformComponent renders children with a CSS transform (translate/scale or configurable matrix) driven by that state. The data flow is: browser events → gesture handlers → state/bounds mutation → CSS transform on the content node, with ResizeObserver-driven recalculation when wrapper or content dimensions change. The package is consumed internally as: TransformWrapper/TransformComponent, auxiliary MiniMap, KeepScale, and Virtualize components, six hooks (useControls, useTransformEffect, useTransformInit, useTransformContext, useTransformComponent, useZoomPanPinch), and an imperative API (zoomIn, zoomOut, setTransform, resetTransform, fitToView, zoomToElement, panBy, clientToContent/contentToClient) exposed via ref, render props, or hooks.
The LLM identified 5 files worth highlighting for reuse:
Self-contained rAF animation engine powering programmatic zoom, auto-alignment, and velocity/inertia glide. Provides an animate() driver over easing curves (easeOut, easeInOutQuad in animations.constants.ts) with per-frame callbacks and early-cancellation support. Pure and dependency-free — extractable into any frontend project needing frame-driven transitions.
Pure math module for pan/zoom limits: computes content bounds vs. viewport, clamps scale and position, and implements rubber-banding/elastic overshoot when limits are exceeded. No internal imports; reusable for any pan/zoom, scroll-snap, or bounding-logic implementation.
Velocity/inertia engine for fling gestures: samples recent pointer positions over time, computes weighted velocity with configurable sensitivity, and decays it with friction to produce glide animation. Isolated calculation logic with independent unit coverage in __tests__/units/velocity-and-wheel.spec.ts.
Pure-function utility set behind the imperative API: fit-to-view/zoom-to-rect math, client-to-content and content-to-client coordinate conversion, and transform calculation for programmatic zoom operations. No React dependency — reusable across canvas, SVG, and DOM coordinate systems.
DOM event-classification helpers shared by all gesture handlers: isExcludedNode (CSS-class-based opt-out zones), isEditableTarget, isDraggableTarget, plus cross-realm (portal/iframe) node duck-typing. Solves the recurring problem of distinguishing intentional user interactions (text selection, inputs, drag-and-drop) from pan/zoom gestures — directly reusable in any interaction-heavy component.