3.7.0 โ€ข Published 4 months ago

react-zoom-pan-pinch v3.7.0

Weekly downloads
44,410
License
MIT
Repository
github
Last release
4 months ago

๐Ÿ–ผ React Zoom Pan Pinch

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

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

Try other BetterTyped projects

Do you like this library? Try out other projects

โšกHyper Fetch - Fetching and realtime data exchange framework.


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,
  useControls,
} from "react-zoom-pan-pinch";

const Controls = () => {
  const { zoomIn, zoomOut, resetTransform } = useControls();

  return (
    <div className="tools">
      <button onClick={() => zoomIn()}>+</button>
      <button onClick={() => zoomOut()}>-</button>
      <button onClick={() => resetTransform()}>x</button>
    </div>
  );
};

const Example = () => {
  return (
    <TransformWrapper
      initialScale={1}
      initialPositionX={200}
      initialPositionY={100}
    >
      {({ zoomIn, zoomOut, resetTransform, ...rest }) => (
        <>
          <Controls />
          <TransformComponent>
            <img src="image.jpg" alt="test" />
            <div>Example text</div>
          </TransformComponent>
        </>
      )}
    </TransformWrapper>
  );
};

License

MIT ยฉ prc5

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

๐Ÿ’– Our sponsors

uf-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-zdemotestpublishreact-home-ar@everything-registry/sub-chunk-2625synced-mediawhjr-quiz-sdktflex-docsv5gl-form-builder@dshlass/react-flow-chart@crystaldesign/diva-backoffice@computeruniverse/react-magnifier@configuratorware/configurator-frontendgui@canlooks/can-ui@preply/chat@rsengo/react-flow-chartisigningsdkjmap-core-jsjmapserver-ng-corejmapcloud-ng-corejoplin-plugin-joplin-batchjson-crackjson-crack-drishyalatticeflow-widgetskyc-shipfinex-dev-1kx_designkx_componentphylotree-visualization-demorams-uiuangcermat-web-toolkit-v2test-compilationtour-guide-shared-librarytrendmet-ui-kittrioslibtrinny-londontooljet_elab_sample@aqaurius6666/phylotree-visualization@asymme1/phylotree-visualization-demo@ballerine/backoffice-v2@azrico/chat@barmola/react-flow-chart@bastinjafari/react-flow-chart@bastinjafari/react-flow-chart-with-tooltips@bastinjafari/react-flow-chart-with-tooltips-and-multi-select@bbllc/reactlib@bitpod/p10-react-seat-picker@bubbles-ui/components@cdmbase/graphql-editor@clikvn/otrip-ui-library@clikvn/react-bottom-sheet@clikvn/react-gallery-viewer@bento-core/about@delanobgt/admin-core@difizen/libro-ai-native@difizen/magent-chat@ferlab/ui@hayaah/react-flow-chart@fitpeo/rtm-module@fplan/components-dom@hueyyeng/simple-react-lightbox@iex-xyz/sdk@ielijose/react-flow-chart@icplatform/simple-react-lightbox@gamepark/react-game@frigate-nvr/image-annotator@futureworkshops/react-flow-chart@georginaso/react-flow-chart@grantnunneley/react-flow-chart@loopr-ai/craft@lozadaa/react-orgchart@lucho_1312/react-flow-chart@leuven2030/ui@invyo/react-images-viewer@lifesg/react-design-system@moveread/input-validation-ui
3.7.0

4 months ago

3.6.1

11 months ago

3.6.0

12 months ago

3.5.1

12 months ago

3.5.0

12 months ago

3.4.4

1 year ago

3.4.3

1 year ago

3.4.2

1 year ago

3.4.1

1 year ago

3.4.0

1 year ago

3.2.0

2 years ago

3.3.0

2 years ago

3.1.1

2 years ago

3.0.8

2 years ago

3.1.0

2 years ago

2.2.1

2 years ago

2.2.0

2 years ago

2.4.0

2 years ago

2.6.1

2 years ago

2.6.0

2 years ago

3.0.4

2 years ago

3.0.3

2 years ago

3.0.2

2 years ago

3.0.1

2 years ago

3.0.7

2 years ago

3.0.6

2 years ago

3.0.5

2 years ago

3.0.0

2 years ago

2.3.0

2 years ago

2.5.0

2 years ago

2.3.2

2 years ago

2.3.1

2 years ago

2.5.1

2 years ago

2.1.3

4 years ago

2.1.2

4 years ago

2.1.1

4 years ago

2.0.5

4 years ago

2.0.7

4 years ago

2.0.6

4 years ago

2.0.9

4 years ago

2.0.8

4 years ago

2.0.2

4 years ago

2.0.1

4 years ago

2.0.0

4 years ago

1.6.1

5 years ago

1.6.0

5 years ago

1.5.8

5 years ago

1.5.7

5 years ago

1.5.5

5 years ago

1.5.4

5 years ago

1.5.3

5 years ago

1.5.1

5 years ago

1.5.0

5 years ago

1.4.5

6 years ago

1.4.1

6 years ago

1.4.0

6 years ago

1.3.1

6 years ago

1.3.0

6 years ago

1.1.2

6 years ago

1.1.1

6 years ago

1.1.0

6 years ago

1.0.0

6 years ago

0.9.91

6 years ago

0.9.9

6 years ago

0.9.2

6 years ago

0.9.1

6 years ago

0.9.0

6 years ago

0.6.0

6 years ago

0.5.0

6 years ago