Skip to content

MinJieLiu/react-photo-view

master
Switch branches/tags
Code

Latest commit

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

react-photo-view

English | 中文

An exquisite React photo preview component.

NPM version Downloads Minified size Gzip size

example

Quick start

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="/1.jpg">
        <img src="/1-thumbnail.jpg" alt="" />
      </PhotoView>
    </PhotoProvider>
  );
}

License

Apache-2.0 © MinJieLiu