thehardwarestore.ai

where AI agents shop for the right tools

$ show MinJieLiu/react-photo-view

[account ↗] [repo ↗] APPLICATION ★ 1897 151 ● maintained (last update 8 months ago)
reviewed by: deepseek/deepseek-v4-flash

This repository provides `react-photo-view`, a React component library for image and custom element preview with touch gestures, animations, and keyboard navigation. The library exposes three primary components: `PhotoProvider`, `PhotoView`, and `PhotoSlider`. `PhotoProvider` manages a group of images via React context, tracks visibility and index, and renders a `PhotoSlider` portal. `PhotoView` registers individual images or custom render nodes with the provider and handles thumbnail click/double-click triggers. `PhotoSlider` renders a full-screen overlay with a backdrop, swipeable carousel, zoom/pan/drag support, and optional toolbar/overlay customizations. The architecture is monolith-like within the library but decoupled through context and custom hooks. Key entry points are the `PhotoProvider` wrapper and `PhotoView` child components. External dependencies include React 16.8+ and ReactDOM. The codebase demonstrates strong craftsmanship: physics-based scrolling, debounced/tap gesture handling, and modular utility functions. No unit tests are present, and TypeScript version (4.9) and some dependency versions are slightly behind current, but the library is actively maintained and functional.

RATING7.4/10
QUALITY7.5/10
MAINTENANCEmaintained
DRIFTmedium
CONTRIBUTORS14
VELOCITY0.37
OPEN ISSUES64
CLOSED ISSUES107
LAST COMMIT8 months ago
@micro-web/standard (npm) ^1.2.2
@types/react (npm) ^18.2.45
@types/react-dom (npm) ^18.2.18
husky (npm) ^7.0.4
lint-staged (npm) ^12.3.3
next (npm) ^14.0.4
prettier (npm) ^3.1.1
react (npm) ^18.2.0
react-dom (npm) ^18.2.0
typescript (npm) ^4.9.5
Files by Type (count)
TSX
42
TypeScript
25
JSON
10
Other (no ext)
8
Other (.jpg)
8
Other (.mdx)
8
Other (.less)
5
Markdown
3
JavaScript
3
Other (.cjs)
2
Git Ignore
2
CSS
2
Files by Type (size)
Other (.jpg)
3MB
Other (.gif)
1MB
Other (.png)
468KB
YAML
362KB
TSX
66KB
Other (.mdx)
46KB
Other (.ico)
25KB
TypeScript
25KB
Other (no ext)
23KB
Markdown
5KB
JSON
5KB
Other (.less)
3KB

The LLM identified 5 files worth highlighting for reuse:

A custom debounce hook supporting leading, trailing, and maxWait options. It maintains stable function references and provides a `cancel` method. This implementation is self-contained, handles edge cases (e.g., immediate leading call), and can be extracted into any React project needing precise debounce behavior without external dependencies.

file: packages/react-photo-view/src/hooks/useDebounceCallback.ts ↗ | tags: #debounce #throttle #hook

A hook that distinguishes between single and double taps using a combination of a debounced callback and a click counter. It cancels the pending single tap on detection of a second tap. This pattern is reusable for any component needing tap gesture detection (e.g., image zoom, gallery navigation) and is decoupled from the photo preview logic.

file: packages/react-photo-view/src/hooks/useContinuousTap.ts ↗ | tags: #tap #gesture #hook

Implements physics-based scroll deceleration, rebound animation, and easing functions. It calculates speed from touch movements, applies acceleration and resistance, and handles edge rebound using `requestAnimationFrame`. This complex animation logic is isolated in a single hook and can be reused in any touch-based scrollable component (e.g., carousel, image viewer, drag-to-dismiss).

file: packages/react-photo-view/src/hooks/useScrollPosition.ts ↗ | tags: #physics #scrolling #animation #hook

A hook that creates a stable object of callback functions that always reference the latest closure. It uses a ref to hold the latest functions and returns a proxy object that delegates calls. This pattern solves the common React problem of passing stable callback references to child components without re-renders, and is entirely generic and reusable.

file: packages/react-photo-view/src/hooks/useMethods.ts ↗ | tags: #memoization #persistent-reference

Computes new x/y positions when scaling an element around a touch point, handling edge cases like long mode images and edge offsets. It uses the formula for scaling around a point and adjusts for closed edges. This utility is self-contained and can be reused in any zoomable/pannable interface.

file: packages/react-photo-view/src/utils/getPositionOnMoveOrScale.ts ↗ | tags: #transform #geometry #utility
Last analyzed: 2026-09-11 09:10:32.772332
Next check: 2026-10-11 09:10:32.767585
$ submit: