d

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

15 St Margarets, NY 10033
(+381) 11 123 4567
ouroffice@aware.com

 

KMF

Zoom/Flip/Rotate/Pan Images In React | Reactscript

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

Credit: Source link

Previous Next
Close
Test Caption
Test Description goes like this