react-image-pan-zoom-rotate
TypeScript icon, indicating that this package has built-in type declarations

1.6.0 • Public • Published

React Image Pan, Zoom & Rotate

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

NPM JavaScript Style Guide npm type definitions

Demo

image

Edit q8wl1joow9

Features

  • Drag & Move
  • Zoom In
  • Zoom Out
  • Rotate (in Left only)
  • Flip Image
  • Reset

Install

npm install --save react-image-pan-zoom-rotate

or

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

Usage

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

const App = () => {
  return (
    <ReactPanZoom
      image="https://images.unsplash.com/photo-1551091708-fda32ed3178c"
      alt="Image alt text"
    />
  );
};

export default App;

or Check example folder below file to use your custom UI

ReactPanZoom.tsx

License

MIT © mgorabbani

Package Sidebar

Install

npm i react-image-pan-zoom-rotate

Weekly Downloads

5,079

Version

1.6.0

License

MIT

Unpacked Size

123 kB

Total Files

17

Last publish

Collaborators

  • mgorabbani