0.1.2 • Published 5 years ago
image-zoom-react v0.1.2
Image Zoom React
A component react to enlarge images on touch, click, or mouseover.
Installation
yarn add image-zoom-react or npm install --save image-zoom-react
Usage
import React from 'react'
import ReactDom from 'react-dom'
import ImageZoom from 'image-zoom-react'
const App = () => (
<ImageZoom src="image url" magnify={1.5} />
)
ReactDom.render(<App />, document.getElementById('app'))props
| props | default | description |
|---|---|---|
| src | required | src of image |
| alt | image | alt of image |
| zoomSrc | '' | src of zoom image (may be an image in high res) |
| touch | true | Enables interaction via touch events. |
| on | mouseover | he type of event that triggers zooming. Choose from mouseover or grab |
| duration | 200 | The fadeIn/fadeOut speed of the large image. |
| magnify | 2 | This value is multiplied against the full size of the zoomed image |
| onImageLoaded | () => {} | A function to be called when the image has loaded. Has param is the image element. |
| onZoomIn | () => {} | A function to be called when zoom in. Has param is the image element. |
| onZoomOut | () => {} | A function to be called when zoom out. Has param is the image element. |