React photo viewer
Beautiful image previews in seconds.
awesome-photo-view — the most beautiful, gesture-driven photo viewer for React. Smooth animations, pinch-to-zoom, swipe navigation.
Based on react-photo-view
Smooth Animations
CSS3 transitions for buttery-smooth open/close effects, plus spring physics for native-like momentum scrolling. Customize speed and easing per animation type.
Custom Toolbar
Build your own toolbar with rotation, zoom, fullscreen, and any custom action. The toolbarRender prop gives you full control.
Custom Overlays
Add rich overlay content like descriptions, metadata, or controls on top of the viewer. Full access to rotation, scale, and index state.
Get Started
Up and running in under a minute.
pnpm add awesome-photo-viewyarn add awesome-photo-viewnpm install awesome-photo-viewImport the CSS and wrap your images:
import { PhotoProvider, PhotoView } from 'awesome-photo-view';
import 'awesome-photo-view/dist/awesome-photo-view.css';
export default function Gallery() {
return (
<PhotoProvider>
{images.map((src, i) => (
<PhotoView key={i} src={src}>
<img src={src} alt="" />
</PhotoView>
))}
</PhotoProvider>
);
}More Features
Everything you need, nothing you don't.
Loop Preview
Browse through all images in a seamless loop — no dead ends.
Mask Opacity
Adjust backdrop transparency for the perfect overlay effect.
Controlled Mode
Full programmatic control over visibility, index, and state.
Custom Trigger
Use any element as the trigger — buttons, cards, anything.
Crop Thumbnails
Automatic crop-aware zoom animation for object-fit thumbnails.
Error Handling
Customizable broken-image and loading states out of the box.
Hide Banner
Option to hide the top navigation bar for a minimal look.