react-draggable-image-viewer

React Draggable image zoom component A slack like image viewer for react.

Install the package using NPM:

npm install react-draggable-image-viewer --save

Add the component to your React application:

import ImageView from "react-draggable-image-viewer";
import yourImage from "./path/to/image";

export default function ExampleComponent() {
  return <ImageView src=[yourImage] width={500} />;
}

Configuration

| Prop | Type | Default | Description | | ---------------- | ------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | | images (required) | Array of String | [] | URL/path of the large image | | onHide | Function | function() {} | call when user click on close icon | | isActive | Boolean| false | will show and hide image view component | | Draggable | Boolean | false | allow to drag image | activePhotoIndex | Number | 0 | start displaying image from given index | maxWidth | Number | 300 | max Width will be use for calculate image aspect ratio | maxHeight | Number | 300 | max Height will be use for calculate image aspect ratio

Development

Requirements: Node.js, Yarn

1. Clone this repository: git clone [repo-url]
2. Install all dependencies: yarn install
3. Run yarn start to generate the library bundle using Webpack

Suggestions and contributions are always welcome! Please first discuss changes via issue before submitting a pull request.