react-lens-zoom

The Simplest Zoom Module for Your React Components

Installation

npm i react-lens-zoom

Usage

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