react-photo-view

English | 中文

An exquisite React photo preview component.

Quick start

• Getting Started
• Basic usage
• API
• Change log

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

Install

yarn add react-photo-view

Basic usage:

import { PhotoProvider, PhotoView } from 'react-photo-view';
import 'react-photo-view/dist/react-photo-view.css';

function App() {
  return (
    <PhotoProvider>
      <PhotoView src="https://github.com/MinJieLiu/react-photo-view/raw/master/1.jpg">
        <img src="https://github.com/MinJieLiu/react-photo-view/raw/master/1-thumbnail.jpg" alt="" />
      </PhotoView>
    </PhotoProvider>
  );
}

License

Apache-2.0 © MinJieLiu