1.0.3 • Published 5 years ago
react-draggable-image-viewer v1.0.3
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 --saveAdd 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
- Clone this repository:
git clone [repo-url] - Install all dependencies:
yarn install - Run
yarn startto generate the library bundle using Webpack
Suggestions and contributions are always welcome! Please first discuss changes via issue before submitting a pull request.