Elegant Image Viewer (Gallery Lightbox) Component – react-photo-view

An elegant image viewer (gallery lightbox) component for React applications.

Comprehensive 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.

How to use it:

1. Install and import.

# NPM
$ npm i react-photo-view
import { PhotoProvider, PhotoView } from 'react-photo-view';
import 'react-photo-view/dist/react-photo-view.css';

2. Add images to the component.

function App() {
  return (
    <PhotoProvider>
      <PhotoView src="1.jpg">
        <img src="1-thumbnail.jpg" alt="" />
      </PhotoView>
    </PhotoProvider>
  );
}

Preview:

Elegant Image Viewer (Gallery Lightbox) Component - react-photo-view

Download Details:

Author: MinJieLiu

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/MinJieLiu/react-photo-view

License: MIT

Add Comment