react-photo-view

A beautiful photo preview component

Touch gesture

Feedback animation

Image adaptation

Custom element

keyboard navigation

Based on TypeScript

Lightweight

More...

react-photo-view has an unparalleled preview interaction experience: starting from the opening of the image, the animation, details and interaction of each frame have been carefully designed and repeatedly debugged, which is comparable to the effect of native image preview.

Getting Started · API · GitHub (opens in a new tab)

Overview

import { PhotoProvider, PhotoView } from 'react-photo-view';
import 'react-photo-view/dist/react-photo-view.css';
 
export default function App() {
  return (
    <PhotoProvider>
      <PhotoView src="/1.jpg">
        <img src="/1-thumbnail.jpg" alt="" />
      </PhotoView>
    </PhotoProvider>
  );
}

In this example, react-photo-view provides two components: PhotoProvider and PhotoView. With the PhotoProvider as the boundary, all the PhotoView images in it will be extracted as a set of image preview galleries in the running order. When an <img > is clicked, it will locate the specified image and open the preview.

features

It has very perfect details and features:

Support touch gestures, drag and pan physical effect sliding, two-finger specified position to zoom in and out
All aspects of animation connection, open and close the rebound touch edge, let the natural interaction effect
The image is adaptive, with a suitable initial rendering size, and adapts according to the adjustment
Support for custom previews like <video> or any HTML element
Keyboard navigation, perfect for desktop
Support custom node expansion, easy to achieve full-screen preview, rotation control, picture introduction and more functions
Based on typescript, 7KB Gzipped, supports server-side rendering
Simple and easy to use API, zero cost to get started