# react-zoom-component

> [![npm version](http://img.shields.io/npm/v/react-zoom-component.svg)](https://npmjs.org/package/react-zoom-component)

Latest version **0.1.3** (published 2019-09-23) · 0 weekly downloads

## Install

```sh
npm install react-zoom-component
pnpm add react-zoom-component
yarn add react-zoom-component
bun add react-zoom-component
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2019-09-23 |
| First published | 2019-09-19 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Sunil Kashyap |
| Maintainers | skdroid |
| Keywords | React, typescript, Image Zoom, Zoom, Component |

## Links

- npm: https://www.npmjs.com/package/react-zoom-component
- Repository: https://github.com/sunilnkashyap/react-zoom-component
- Homepage: https://github.com/sunilnkashyap/react-zoom-component#readme
- Issues: https://github.com/sunilnkashyap/react-zoom-component/issues
- npm.io page: https://npm.io/package/react-zoom-component

## Dependencies (8)

- [react](https://npm.io/package/react.md) ^16.9.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.9.0
- [typescript](https://npm.io/package/typescript.md) 3.6.3
- [@types/jest](https://npm.io/package/@types/jest.md) 24.0.18
- [@types/node](https://npm.io/package/@types/node.md) 12.7.5
- [@types/react](https://npm.io/package/@types/react.md) 16.9.2
- [react-scripts](https://npm.io/package/react-scripts.md) 3.1.2
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) 16.9.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.3 (latest) — 2019-09-23
- 0.1.2 — 2019-09-23
- 0.1.1 — 2019-09-20
- 0.1.0 — 2019-09-20
- 0.0.2 — 2019-09-19
- 0.0.1 — 2019-09-19

## README

# react-zoom-component

[![npm version](http://img.shields.io/npm/v/react-zoom-component.svg)](https://npmjs.org/package/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](http://www.jacklmoore.com/zoom/) and
[elevateZoom-plus](http://igorlino.github.io/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](https://en.wikipedia.org/wiki/Data_URI_scheme)).

## 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:

```bash
$ npm install react-zoom-component --save
```

## Using this library

From your React `Component`:

```typescript
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

---
_Source: https://npm.io/package/react-zoom-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._