0.1.6 • Published 6 years ago
react-lens-zoom v0.1.6
react-lens-zoom
The Simplest Zoom Module for Your React Components
Installation
npm i react-lens-zoomUsage
import ImageLensZoom from 'react-lens-zoom';
const Example = () => (
<ImageLensZoom
source='https://webkit.org/demos/srcset/image-src.png'
/>
);Props
| Property | Type | Description | Mandatory? | Default |
|---|---|---|---|---|
| source | String | The Mandatory Image Source | Yes | - |
| sourceId | String | Unique Identifier for Source Image element in DOM | No | sourceImage |
| destId | String | Unique Identifier for Destination Image element in DOM | No | destImage |
| sourceClass | String | Additional ClassName to Source Image Element | No | addSourceClass |
| destClass | String | Additional ClassName to Destination Image Element | No | addDestClass |
| sourceWidth | String | Width of the Source Image | No | 300 |
| destWidth | String | Width of the Destination Image | No | 700 |
| sourceHeight | String | Height of the Source Image | No | 300 |
| destHeight | String | Height of the Destination Image | No | 500 |
| destSource | String | Optional Destination Image with Higher Resolution | No | null |
Methods
onLoad()- Function - Callback once the source Image had been loaded. Signifies the point for zoom calculations.
Check out the src/Example for Customized Usage