# @dior/react-prismazoom

> A pan and zoom component for React, using CSS transformations.

Latest version **1.2.0** (published 2020-12-04) · ISC license · 0 weekly downloads

## Install

```sh
npm install @dior/react-prismazoom
pnpm add @dior/react-prismazoom
yarn add @dior/react-prismazoom
bun add @dior/react-prismazoom
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2020-12-04 |
| First published | 2020-05-14 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 31.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Sylvain DUBUS |
| Maintainers | gosia-malinowska, sbekaert, izi-p, melanieduverger, alacroix, djiit |
| Keywords | react, react-component, zoom, pan, drag, pinch-zoom, css3 |

## Links

- npm: https://www.npmjs.com/package/@dior/react-prismazoom
- Repository: https://github.com/sylvaindubus/react-prismazoom
- Homepage: https://github.com/sylvaindubus/react-prismazoom#readme
- Issues: https://github.com/sylvaindubus/react-prismazoom/issues
- npm.io page: https://npm.io/package/@dior/react-prismazoom

## Dependencies (1)

- [fsevents](https://npm.io/package/fsevents.md) *

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

- 1.2.0 (latest) — 2020-12-04
- 1.1.6 — 2020-06-23
- 1.1.5 — 2020-06-22
- 1.1.4 — 2020-05-14

## README

# react-prismazoom

## About

A pan and zoom component for React, using CSS transformations.

Depends only upon prop-types, react and react-dom modules.  
Works on both desktop and mobile.

Online demo [here!](https://sylvaindubus.github.io/react-prismazoom/)

### Zoom features :mag_right:
* Zoom with the mouse-wheel or a two-finger pinch
* Zoom using double-click or double-tap
* Zoom on selected area and center

### Pan features :point_up_2:
* Pan with the mouse pointer or with one finger when zoomed-in
* Intuitive panning depending on available space when zoomed-in
* Adjusts cursor style to indicate in which direction the element can be moved

## Installation

### Install the component
```bash
$ npm i -D react-prismazoom
```
### Install the example project

This project includes a full-featured application example.

First clone the project.

Then, install it:
```bash
$ npm i
```
Run the Webpack Dev Server:
```bash
$ npm run start
```
Go to http://localhost:1664.

**Note:** sources of this example can be found in `example/src`.

### Run unit tests

You can either run all tests at once:
```bash
$ npm test
```

Or run tests each time a change on source files occured:
```bash
$ npm run watchTest
```

## Usage

### Implementation

```jsx
import PrismaZoom from 'react-prismazoom'

<PrismaZoom>
  <img src="my-image.png" />
  <p>A text that can be zoomed and dragged</p>
</PrismaZoom>
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- |  --- |
| className | string | None | Class name to apply on the zoom wrapper. |
| style | object | None | Style to apply on the zoom wrapper. Note that *transform*, *transition*, *cursor*, *touch-action* and *will-change* cannot be overridden. Example: `style={{backgroundColor: 'red'}}`. |
| minZoom | number | 1 | Minimum zoom ratio. |
| maxZoom | number | 5 | Maximum zoom ratio. |
| scrollVelocity | number | 0.1 | Zoom increment or decrement on each scroll wheel detection. |
| onZoomChange | function | null | Function called each time the zoom value changes. |
| leftBoundary | number | 0 | Left screen-relative boundary, used to limit panning zone. |
| rightBoundary | number | 0 | Right screen-relative boundary, used to limit panning zone. |
| topBoundary | number | 0 | Top screen-relative boundary, used to limit panning zone. |
| bottomBoundary | number | 0 | Bottom screen-relative boundary, used to limit panning zone. |
| animDuration | number | 0.25 | Animation duration (in seconds). |
| doubleTouchMaxDelay | number | 300 | Max delay between two taps to consider a double tap (in milliseconds). |
| decelerationDuration | number | 750 | Decelerating movement duration after a mouse up or a touch end event (in milliseconds). |

**Note:** all props are optional.

### Public methods

These functions can be called from parent components.

**zoomIn (value)**  
*Increments the zoom with the given value.*  
Param {value: Number} : Zoom value

**zoomOut (value)**  
*Decrements the zoom with the given value.*  
Param {value: Number} : Zoom value

**zoomToZone (relX, relY, relWidth, relHeight)**  
*Zoom-in on the specified zone with the given relative coordinates and dimensions.*  
Param {relX: Number} : Relative X position of the zone left-top corner in pixels  
Param {relY: Number} : Relative Y position of the zone left-top corner in pixels  
Param {relWidth: Number} : Zone width in pixels  
Param {relHeight: Number} : Zone height in pixels

**reset ()**  
*Resets the component to its initial state.*

**getZoom ()**  
*Returns the current zoom value.*  
Return {Number} : Zone value

## License

React PrismaZoom is licensed under the ISC license. See the LICENSE.md file for more details.

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