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-magnifier

React image zoom component

Simple and customizable
Supports touch screens
Allows different files for large image and magnifying glass (e.g. thumbnail and high-resolution image)

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	`''`	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

Any other props will be passed down to the <img> element. This way, you can e.g. add an alt attribute to the image.

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.