# react-use-pinch-zoom

> A react hook for pinch-to-zoom gesture interaction.

Latest version **0.0.4** (published 2021-01-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-use-pinch-zoom
pnpm add react-use-pinch-zoom
yarn add react-use-pinch-zoom
bun add react-use-pinch-zoom
```

## Health

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

Positive: has types; no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2021-01-17 |
| First published | 2021-01-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 21.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Hyunsub Kim |
| Maintainers | noverish |
| Keywords | react, reactjs, pinch, zoom, hook |

## Links

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

## 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.0.4 (latest) — 2021-01-17
- 0.0.3 — 2021-01-10
- 0.0.2 — 2021-01-09
- 0.0.1 — 2021-01-02

## README

![license](https://img.shields.io/github/license/Noverish/react-use-pinch-zoom?style=flat-square)
[![npm version](https://img.shields.io/npm/v/react-use-pinch-zoom?style=flat-square)](https://www.npmjs.com/package/react-use-pinch-zoom)
[![npm downloads](https://img.shields.io/npm/dm/react-use-pinch-zoom?style=flat-square)](https://www.npmjs.com/package/react-use-pinch-zoom)

Most of the code is from [react-pinch-and-zoom](https://github.com/conradlo/react-pinch-and-zoom)

# React-Use-Pinch-Zoom

A react hook for pinch-to-zoom gesture interaction.

## Demo

![Demo Webp](https://raw.githubusercontent.com/Noverish/react-use-pinch-zoom/master/static/demo.webp)

[Demo Webpage](https://noverish.github.io/react-use-pinch-zoom/)

## Usage

1. Install this package as dependency

```shell
$ npm install react-use-pinch-zoom
```

2. Import the hook, get container and content props from hook, and use them to whatever you want to pinch zoom

```tsx
import usePinchZoom from 'react-use-pinch-zoom';

function App() {
  const [containerProps, contentProps] = usePinchZoom<HTMLDivElement, HTMLImageElement>();

  return (
    <>
      <h1>Pinch Zoom</h1>
      <div {...containerProps}>
        <img src="/image.jpg" {...contentProps} />
      </div>
    </>
  );
}
```

3. [Optional] You can customize style of element.

```tsx
import usePinchZoom from 'react-use-pinch-zoom';

function App() {
  const [containerProps, contentProps] = usePinchZoom<HTMLDivElement, HTMLImageElement>();

  const { style: containerStyle, ...restContainerProps } = containerProps;

  const newStyle = {
    display: 'inline-block',
    ...containerStyle,
  }

  return (
    <>
      <h1>Pinch Zoom</h1>
      <div style={newStyle} {...restContainerProps}>
        <img src="/image.jpg" {...contentProps} />
      </div>
    </>
  );
}
```

## Options

|name         | Type                           | Default   |
|-------------|--------------------------------|-----------|
|minZoomScale | number                         | 1.0       |
|maxZoomScale | number                         | 4.0       |
|onTransform  | (transform: Transform) => void | undefined |

```tsx
import usePinchZoom, { PinchZoomTypes } from 'react-use-pinch-zoom';

const [containerProps, contentProps] = usePinchZoom({
  minZoomScale: 0.5,
  maxZoomScale: 2.0,
  onTransform: (transform: PinchZoomTypes.Transform) => {
    console.log(transform);
  },
});
```

## How it works

`containerProps` and `contentProps` consist of below these.

```typescript
const containerProps = {
  onTouchStart,
  onTouchMove,
  onTouchEnd,
  style: {
    overflow: 'hidden',
    touchAction: 'none',
  },
  ref,
}

const contentProps = {
  style: {
    willChange: 'transform',
    transition: 'transform',

    transform: `scale(${zoomScale}) translate(${x}px, ${y}px)`,
    webkitTransform: `scale(${zoomScale}) translate(${x}px, ${y}px)`,
  },
  ref,
}
```

`react-use-pinch-zoom` takes control of touch event and modifies `zoomScale`, `x` and `y` values in transform style string.

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