react-zoom-component

Project status

Still in early development, more features are planned and incoming. Should be in a working state right now but it's not tested in lots of different setups yet.

Demonstration of available features available here.

About

react-zoom-xomponent is inspired by JQuery libraries such as jQuery Zoom and elevateZoom-plus but a pure React with typescript implementation of similar concepts. This plugin works with both URLs to images and in-line images (Data URI).

Available options

All settings except img are optional. If no img is provided it won't render.

Option	Default value	Description
Image	none	(Required) The smaller version of the image that will be shown when there's no interaction by the user.
FullImage	none	The full resolution version of the image to be used when zooming. If not supplied thumbImage will be used.
Magnification	1	The zoom factor to be used by default. 1 means we use the fullImage at its actual resolution.
enableScrollZoom	false	Boolean that toggles if the mouse wheel should be captured when hovering over the image to adjust magnification.
Width	'image width'	Width of thumb image if supplied.
Height	'image height'	Height of thumb image if supplied.
ImageAlt	'Image'	Alt tag value of thumb image. Alt text will appear on hover of image.
ResultContainer	{}	Configuration of result container.
ImageClass	''	ClassName for thumb image.
LensClass	''	ClassName for lens. lens is the square box appears on mouse hovering.
ResultClass	''	ClassName for result container.

ResultContainer

Key	Description
Top	Top position of result div in percent. eg. if Top=0 then result container will apper on the top of the thumb image.
Left	Left position of result div in percent. eg. if Left=0 then result container will apper on the left most of the thumb image.
Width	Width of the result container.
Height	Height of the result container.

Magnification

Magnification is the zoom ratio of the image.

Installation

To install this library, run:

$ npm install react-zoom-component --save

Using this library

From your React Component:

import  React  from  'react';
 
// Import the library
import  ZoomComponent  from  'react-zoom-component';
 
// Import sample image
import  sampleImage  from  './assets/SampleJPGImage_500kbmb.jpg';
 
 
export  default  class  Demo  extends  React.Component<Props, State> {
 
    constructor(props:  Props){
        super(props);
    }
    
    render(){
        return(
            <>
                <div  className="container">
                    <h1>React Zoom Component</h1>
                    <h3>Basic Initialization</h3>
                    <ZoomComponent  Width={500}  Height={500}  Image={sampleImage}  />
                </div>
            </>
        )
    }
}

License

MIT © Sunil Kashyap