react-pinch-zoom-lite

Lightweight React pinch in / pinch out component and hook built with Vite.

Install

npm install react-pinch-zoom-lite

Peer dependencies:

• react
• react-dom

Usage – Component

import { PinchZoom } from "react-pinch-zoom-lite";

export function Example() {
  return (
    <PinchZoom>
      <img src="/image.png" alt="Zoom me" />
    </PinchZoom>
  );
}

Usage – Hook

import { usePinchZoom } from "react-pinch-zoom-lite";

export function Example() {
  const { ref, style, scale } = usePinchZoom({
    minScale: 0.9,
    maxScale: 1.75,
    stepFactor: 1.008,
  });

  return (
    <div ref={ref} style={style}>
      Scale: {scale.toFixed(2)}
    </div>
  );
}

Build

npm run build

The built files will be in dist/.

Publish to npm

1. Make sure you are logged in:

   npm login

2. Update the name in package.json if react-pinch-zoom-lite is already taken.

3. Publish as a public package:

   npm publish --access public