0.1.3 • Published 5 years ago
react-zoom-component v0.1.3
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