3.4.3 โ€ข Published 1 month ago

react-zoom-pan-pinch v3.4.3

Weekly downloads
44,410
License
MIT
Repository
github
Last release
1 month ago

๐Ÿ–ผ React Zoom Pan Pinch

Super fast and light react npm package for zooming, panning and pinching html elements in easy way

Do you like this library? Try out other projects โšกHyper Fetch

Sources

Key Features

  • ๐Ÿš€ Fast and easy to use
  • ๐Ÿญ Light, without external dependencies
  • ๐Ÿ’Ž Mobile gestures, touchpad gestures and desktop mouse events support
  • ๐ŸŽ Powerful context usage, which gives you a lot of freedom
  • ๐Ÿ”ง Highly customizable
  • ๐Ÿ‘‘ Animations and Utils to create own tools
  • ๐Ÿ”ฎ Advanced hooks and components

Help me keep working on this project โค๏ธ


Installation

npm install --save react-zoom-pan-pinch
or
yarn add react-zoom-pan-pinch

Examples

import React, { Component } from "react";

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

const Example = () => {
  return (
    <TransformWrapper>
      <TransformComponent>
        <img src="image.jpg" alt="test" />
      </TransformComponent>
    </TransformWrapper>
  );
};

or

import React, { Component } from "react";

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

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

or

import React, { useRef } from "react";
import {
  TransformWrapper,
  TransformComponent,
  ReactZoomPanPinchRef,
} from "react-zoom-pan-pinch";

const Controls = ({ zoomIn, zoomOut, resetTransform }) => (
  <>
    <button onClick={() => zoomIn()}>+</button>
    <button onClick={() => zoomOut()}>-</button>
    <button onClick={() => resetTransform()}>x</button>
  </>
);

const Component = () => {
  const transformComponentRef = useRef<ReactZoomPanPinchRef | null>(null);

  const zoomToImage = () => {
    if (transformComponentRef.current) {
      const { zoomToElement } = transformComponentRef.current;
      zoomToElement("imgExample");
    }
  };

  return (
    <TransformWrapper
      initialScale={1}
      initialPositionX={200}
      initialPositionY={100}
      ref={transformComponentRef}
    >
      {(utils) => (
        <React.Fragment>
          <Controls {...utils} />
          <TransformComponent>
            <img src="image.jpg" alt="test" id="imgExample" />
            <div onClick={zoomToImage}>Example text</div>
          </TransformComponent>
        </React.Fragment>
      )}
    </TransformWrapper>
  );
};

License

MIT ยฉ prc5

@preply/chatuf-grydsxmejruf-rfc-dmmmeozhlpdevelapp-regional-frontendrotation-gallery-2@unificater/uf-rfc-dmmmeozhlpunificater-react-flow-charttest-reactflow-chartcustom-react-flow-chart@unificater/flow-chartbento-frontendasset-diagram-bactryadiagrambactryabactrya-asset-diagram-managerbactrya-assetdiagram@linkedcamp/flow-chart@artemantcev/react-flow-chartbento-corebug-tracker-libsid-npm-test3sid-npmtest-1sid-npmtest-2sid-test-create-npm@infilect_developer/shelf-visualiserpdf-data-apppdf-oapppdf-viewer-app@infinitebrahmanuniverse/nolb-react-zdemotestpublishintraactive-sdk-uireact-home-ar@everything-registry/sub-chunk-2625lightbox.js-reactkx_componentkx_designkyc-shipfinex-dev-1hex-xml-editorknowledge-graph-byjuslatticeflow-widgetsisigningsdkjmapserver-ng-corejmapcloud-ng-corejmap-core-jsmodel-explorerjson-crackjson-crack-drishyainspace-widgetinspace-widget-testidsk-componentinteractive-process-graphsluokun_designmeta-npm-bookingmeta-office-booking@hayaah/react-flow-chartelabnext_editorelabnext_reportepic-galleryflow-lib-datahubfreshtracksgatsby-plugin-jaengraphql-editorgyk_designfeup-designfindingpi-react-componentsgatsby-theme-photo-albumsgallery-with-magnifierr-lightboxquomponentsrainsoft-rcreact-lib-dnd-flowchart-reworkedreact-image-annotation-with-zoomreact-imageeditorlmreact-image-annotation-plus-zoomoura-node-editorreact-pic-galleryreact-signy-form-component-test-1react-signy-form-component-test-2playbook-uiphylotree-visualization-demoreact-denmark-mapreportelabreport-publishreport-publish-apreport-publish22@grantnunneley/react-flow-chart@eeacms/volto-clms-theme@fplan/components-dom@hueyyeng/simple-react-lightbox@icplatform/simple-react-lightbox@izumiz-dev/react-flow-chart@futureworkshops/react-flow-chart@jeremyckahn/farmhand@fitpeo/rtm-module@ielijose/react-flow-chart@iex-xyz/sdk@jaenjs/snek-finder@gamepark/react-gameuangcermat-web-toolkit-v2tooljet_elab_sampletour-guide-shared-library
3.4.3

1 month ago

3.4.2

2 months ago

3.4.1

2 months ago

3.4.0

2 months ago

3.2.0

6 months ago

3.3.0

5 months ago

3.1.1

6 months ago

3.0.8

10 months ago

3.1.0

9 months ago

2.2.1

1 year ago

2.2.0

1 year ago

2.4.0

1 year ago

2.6.1

1 year ago

2.6.0

1 year ago

3.0.4

1 year ago

3.0.3

1 year ago

3.0.2

1 year ago

3.0.1

1 year ago

3.0.7

12 months ago

3.0.6

1 year ago

3.0.5

1 year ago

3.0.0

1 year ago

2.3.0

1 year ago

2.5.0

1 year ago

2.3.2

1 year ago

2.3.1

1 year ago

2.5.1

1 year ago

2.1.3

3 years ago

2.1.2

3 years ago

2.1.1

3 years ago

2.0.5

3 years ago

2.0.7

3 years ago

2.0.6

3 years ago

2.0.9

3 years ago

2.0.8

3 years ago

2.0.2

3 years ago

2.0.1

3 years ago

2.0.0

3 years ago

1.6.1

4 years ago

1.6.0

4 years ago

1.5.8

4 years ago

1.5.7

4 years ago

1.5.5

4 years ago

1.5.4

4 years ago

1.5.3

4 years ago

1.5.1

4 years ago

1.5.0

4 years ago

1.4.5

4 years ago

1.4.1

4 years ago

1.4.0

4 years ago

1.3.1

4 years ago

1.3.0

4 years ago

1.1.2

4 years ago

1.1.1

4 years ago

1.1.0

5 years ago

1.0.0

5 years ago

0.9.91

5 years ago

0.9.9

5 years ago

0.9.2

5 years ago

0.9.1

5 years ago

0.9.0

5 years ago

0.6.0

5 years ago

0.5.0

5 years ago