https://github.com/arbaazdossani/react-lens-zoom
:mag: The simplest Image Zoom React Component
https://github.com/arbaazdossani/react-lens-zoom
javascript lens magnify react zoom
Last synced: 3 months ago
JSON representation
:mag: The simplest Image Zoom React Component
- Host: GitHub
- URL: https://github.com/arbaazdossani/react-lens-zoom
- Owner: ArbaazDossani
- Created: 2018-06-10T08:24:55.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-06-10T08:51:03.000Z (about 7 years ago)
- Last Synced: 2025-03-10T11:38:01.075Z (3 months ago)
- Topics: javascript, lens, magnify, react, zoom
- Language: JavaScript
- Size: 82 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-lens-zoom
The Simplest Zoom Module for Your React Components
### Installation
```bash
npm i react-lens-zoom
```
### Usage
```js
import ImageLensZoom from 'react-lens-zoom';
const Example = () => (
);
```
### 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