Package Exports

react-draggable-image-viewer

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-draggable-image-viewer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-draggable-image-viewer

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

Usage

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

Clone this repository: git clone [repo-url]
Install all dependencies: yarn install
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.