Zoom/Flip/Rotate/Pan Images In React

A React based image viewer that allows the user to zoom, flip, rotate, and pan images in the applications.

How to use it:

1. Install & import.

# Yarn
$ yarn add react-image-pan-zoom-rotate

# NPM
$ npm i react-image-pan-zoom-rotate

import React from 'react'
import ReactPanZoom from 'react-image-pan-zoom-rotate'

2. Add the ReactPanZoom component to the app.

const App = () => {
  return (
    <ReactPanZoom
      image='1.jpg'
      alt='Image alt text'
    />
  )
}
export default App

3. Available component props.

height?: string
width?: string
className?: string
enablePan?: boolean
reset?: () => void
zoom?: number
pandx?: number
pandy?: number
rotation?: number
onPan?: (x: number, y: number) => void
setZoom: (z: number) => void
onReset?: (dx: number, dy: number, zoom: number) => void
onClick?: (e: React.MouseEvent<any>) => void
style?: {}

Preview:

Download Details:

Author: mgorabbani

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/mgorabbani/react-image-pan-zoom-rotate

License: MIT