@kosmotema/react-zoom-pan-pinch

Super fast and light react Node.js package for zooming, panning and pinching html elements in an easy way.

This is a fork of @pronestor/react-zoom-pan-pinch, created in order to expose styles in a separate .css file (to support the use of the library inside web components).

Since repository @pronestor/react-zoom-pan-pinch is archived, version 3 of this package is archived too. You can found version 4, that is based on the original repo from Maciej Pyrc with the same changes here.

Documentation

Storybook for @kosmotema/react-zoom-pan-pinch.

Quick Start

Installation

yarn add @kosmotema/react-zoom-pan-pinch

or

npm install @kosmotema/react-zoom-pan-pinch

Usage

Basic usage:

import {
  TransformComponent,
  TransformWrapper,
} from "@kosmotema/react-zoom-pan-pinch";

import "@kosmotema/react-zoom-pan-pinch/dist/index.css";

export const SimpleExample = () => (
  <TransformWrapper>
    <TransformComponent>
      <img src="image.jpg" alt="test" />
    </TransformComponent>
  </TransformWrapper>
);

With controls:

import {
  TransformComponent,
  TransformWrapper,
} from "@kosmotema/react-zoom-pan-pinch";

import "@kosmotema/react-zoom-pan-pinch/dist/index.css";

export const ExampleWithZoomControls = () => (
  <TransformWrapper
    initialPositionX={200}
    initialPositionY={100}
    initialScale={1}
  >
    {({ zoomIn, zoomOut, ...rest }) => (
      <>
        <div className="tools">
          <button onClick={() => zoomIn()}>+</button>
          <button onClick={() => zoomOut()}>-</button>
        </div>
        <TransformComponent>
          <img src="image.jpg" alt="test" />
          <div>Example text</div>
        </TransformComponent>
      </>
    )}
  </TransformWrapper>
);

License

MIT © Pronestor, Artem Pitikin