Skip to content

React library to give control on image to move zoom and rotate

License

Notifications You must be signed in to change notification settings

emildancescu/react-image-pan-zoom-rotate

 
 

Repository files navigation

npm type definitions

React Pan, Zoom & Rotate

A simple pan and zoom and rotating for images in react.

Demo

Edit q8wl1joow9

Installation

> yarn add react-image-pan-zoom-rotate

Features

  • Drag & Move
  • Zoom In
  • Zoom Out
  • Rotate (in Left only)
  • Keyboard key press for +, - , r respectively for Zoom In, Zoom Out and Rotate.

Usage

import ReactPanZoom from 'react-image-pan-zoom-rotate';
class MyComponent extends React.PureComponent {
  public render() {
    return (
      <ReactPanZoom image="https://drscdn.500px.org/photo/105738331/q%3D80_m%3D2000/v2?webp=true&sig=538a4f76f4966c84acb01426bb4a4a5e4a85b72a2c3bd64973d3a369f9653007" alt="document image"/>
    );
  }
}

About

React library to give control on image to move zoom and rotate

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 67.4%
  • JavaScript 31.7%
  • HTML 0.9%