{"_id":"@alexlande/react-zoom-pan-pinch","name":"@alexlande/react-zoom-pan-pinch","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@alexlande/react-zoom-pan-pinch","version":"0.0.1","description":"Zoom and pan html elements in easy way","author":{"name":"prc5, Alex Lande"},"license":"MIT","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","source":"src/index.ts","scripts":{"build":"rollup -c","build:docs":"build-storybook","start":"DISABLE_ESLINT_PLUGIN=true start-storybook -p 6006 --no-manager-cache","test":"jest","lint":"eslint . --ext .js,.jsx,.tsx,.ts --fix","format":"prettier --write .","typecheck":"tsc --noEmit --emitDeclarationOnly false","prepare":"install-peers && yarn build","predeploy":"yarn run build:docs","deploy":"gh-pages -d storybook-static","release":"yarn semantic-release"},"peerDependencies":{"react":"*","react-dom":"*"},"devDependencies":{"@babel/core":"^7.20.12","@babel/runtime":"^7.20.13","@commitlint/cli":"^17.0.0","@commitlint/config-conventional":"^17.0.2","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-typescript":"^8.2.1","@semantic-release/changelog":"^6.0.1","@semantic-release/commit-analyzer":"^9.0.2","@semantic-release/git":"^10.0.1","@semantic-release/github":"^8.0.6","@semantic-release/npm":"^9.0.1","@semantic-release/release-notes-generator":"^10.0.3","@storybook/addon-a11y":"^6.5.16","@storybook/addon-actions":"^6.5.16","@storybook/addon-docs":"^6.5.16","@storybook/addon-essentials":"^6.5.16","@storybook/addon-links":"^6.5.16","@storybook/addon-storysource":"^6.5.16","@storybook/builder-webpack5":"^6.5.16","@storybook/manager-webpack5":"^6.5.16","@storybook/preset-create-react-app":"4.1.2","@storybook/react":"^6.5.16","@testing-library/dom":"^8.20.0","@testing-library/react":"^13.4.0","@types/jest":"^26.0.22","@types/node":"^15.6.1","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","@typescript-eslint/eslint-plugin":"^5.28.0","@typescript-eslint/parser":"^5.28.0","babel-eslint":"9.0.0","babel-loader":"^8.2.2","commitlint":"^17.0.2","cross-env":"^7.0.3","eslint":"^8.17.0","eslint-config-airbnb":"^19.0.4","eslint-config-airbnb-typescript":"^17.0.0","eslint-config-next":"12.1.6","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.1","eslint-plugin-import":"^2.26.0","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.30.0","eslint-plugin-react-hooks":"^4.6.0","gh-pages":"^3.1.0","install-peers-cli":"^2.2.0","jest-css-modules":"^2.1.0","jest-extended":"^3.2.0","postcss":"^8.2.13","prism-react-renderer":"^1.2.1","react":"*","react-dom":"*","react-scripts":"5.0.1","rollup":"^2.46.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-dts":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.0","semantic-release":"^19.0.5","source-map-loader":"^2.0.1","ts-jest":"^29.0.3","ts-loader":"^9.4.2","ts-node":"~10.9.1","typescript":"^4.2.3","webpack":"5","webpack-cli":"^5.0.1"},"engines":{"node":">=8","npm":">=5"},"config":{"commitizen":{"path":"git-cz"}},"repository":{"type":"git","url":"git+https://github.com/alexlande/react-zoom-pan-pinch.git"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"keywords":["react","zoom","pan","pinch","animation","velocity","css","fast","transformations","scale","drag","viewer","reacts","touch","css3","svg","bounds","context"],"gitHead":"e319b16a1596445fafbd5ffe1a72f1626d795b70","bugs":{"url":"https://github.com/alexlande/react-zoom-pan-pinch/issues"},"homepage":"https://github.com/alexlande/react-zoom-pan-pinch#readme","_id":"@alexlande/react-zoom-pan-pinch@0.0.1","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-8CWrkb4FidKUBclViDyyG1PglI7HhS/EGUQu+GRKbHXjAPXPl5xogd+4gvlzOlpelQcLbjQOO5loktiubSJCHA==","shasum":"8fd8973c60d0dea2ca9a761749f8a2dbf84f357e","tarball":"https://registry.npmjs.org/@alexlande/react-zoom-pan-pinch/-/react-zoom-pan-pinch-0.0.1.tgz","fileCount":188,"unpackedSize":3404268,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDatIHRvpHSYtmw8e5vkxEoyqPZ67rpLha5aS+lcrXTrAIgT/rgxfJUrMiny83qYjp/xaQQYTsat8nUqwf3l2xxQxc="}]},"_npmUser":{"name":"alexlande","email":"alexlande@gmail.com"},"directories":{},"maintainers":[{"name":"alexlande","email":"alexlande@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-zoom-pan-pinch_0.0.1_1706672340072_0.09989351183025952"},"_hasShrinkwrap":false}},"time":{"created":"2024-01-31T03:38:59.934Z","0.0.1":"2024-01-31T03:39:00.488Z","modified":"2024-01-31T03:39:00.789Z"},"maintainers":[{"name":"alexlande","email":"alexlande@gmail.com"}],"description":"Zoom and pan html elements in easy way","homepage":"https://github.com/alexlande/react-zoom-pan-pinch#readme","keywords":["react","zoom","pan","pinch","animation","velocity","css","fast","transformations","scale","drag","viewer","reacts","touch","css3","svg","bounds","context"],"repository":{"type":"git","url":"git+https://github.com/alexlande/react-zoom-pan-pinch.git"},"author":{"name":"prc5, Alex Lande"},"bugs":{"url":"https://github.com/alexlande/react-zoom-pan-pinch/issues"},"license":"MIT","readme":"# 🖼 React Zoom Pan Pinch\n\n> Super fast and light react npm package for zooming, panning and pinching html\n> elements in easy way\n\n<p>\n  <a href=\"https://bettertyped.com/\">\n    <img src=\"https://custom-icon-badges.demolab.com/static/v1?label=&message=BetterTyped&color=333&logo=BT\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/react-zoom-pan-pinch\">\n    <img src=\"https://custom-icon-badges.demolab.com/npm/v/react-zoom-pan-pinch.svg?logo=npm&color=e22121\"/>\n  </a>\n  <a href=\"https://github.com/prc5/react-zoom-pan-pinch\">\n    <img src=\"https://custom-icon-badges.demolab.com/github/stars/prc5/react-zoom-pan-pinch?logo=star\" />\n  </a>\n  <a href=\"https://github.com/prc5/react-zoom-pan-pinch/blob/main/License.md\">\n    <img src=\"https://custom-icon-badges.demolab.com/github/license/prc5/react-zoom-pan-pinch?logo=law&color=yellow\" />\n  </a>\n  <a href=\"https://github.com/semantic-release/semantic-release\">\n    <img src=\"https://custom-icon-badges.demolab.com/badge/semver-commitzen-e10079?logo=semantic-release&color=e76f51\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/react-zoom-pan-pinch\">\n    <img src=\"https://custom-icon-badges.demolab.com/npm/dm/react-zoom-pan-pinch?logoColor=fff&logo=trending-up\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/react-zoom-pan-pinch\">\n    <img src=\"https://custom-icon-badges.demolab.com/bundlephobia/minzip/react-zoom-pan-pinch?color=E10098&logo=package\" />\n  </a>\n  <a href=\"https://github.com/prc5/react-zoom-pan-pinch\">\n    <img src=\"https://custom-icon-badges.demolab.com/badge/typescript-%23007ACC.svg?logo=typescript&logoColor=white\" />\n  </a>\n  <a href=\"https://hits.sh/github.com/prc5/react-zoom-pan-pinch/\">\n    <img src=\"https://hits.sh/github.com/prc5/react-zoom-pan-pinch.svg?color=64BC4B&logo=bookmeter\" />\n  </a>\n  <a href=\"https://twitter.com/maciej_pyrc\">\n    <img alt=\"Twitter Follow\" src=\"https://img.shields.io/twitter/follow/maciej_pyrc?label=Follow%20&style=social\"/>\n  </a>\n</p>\n\nDo you like this library? Try out other projects\n**[⚡Hyper Fetch](https://github.com/BetterTyped/hyper-fetch)**\n\n#### Sources\n\n- [Demo](https://BetterTyped.github.io/react-zoom-pan-pinch/?path=/story/examples-big-image--big-image)\n- [Docs](https://BetterTyped.github.io/react-zoom-pan-pinch/?path=/story/docs-props--page)\n\n## Key Features\n\n- 🚀 Fast and easy to use\n- 🏭 Light, without external dependencies\n- 💎 Mobile gestures, touchpad gestures and desktop mouse events support\n- 🎁 Powerful context usage, which gives you a lot of freedom\n- 🔧 Highly customizable\n- 👑 Animations and Utils to create own tools\n- 🔮 Advanced hooks and components\n\n## Help me keep working on this project ❤️\n\n- [Become a Sponsor on GitHub](https://github.com/sponsors/prc5)\n\n---\n\n## Installation\n\n```bash\nnpm install --save react-zoom-pan-pinch\nor\nyarn add react-zoom-pan-pinch\n```\n\n## Examples\n\n```jsx\nimport React, { Component } from \"react\";\n\nimport { TransformWrapper, TransformComponent } from \"react-zoom-pan-pinch\";\n\nconst Example = () => {\n  return (\n    <TransformWrapper>\n      <TransformComponent>\n        <img src=\"image.jpg\" alt=\"test\" />\n      </TransformComponent>\n    </TransformWrapper>\n  );\n};\n```\n\nor\n\n```jsx\nimport React, { Component } from \"react\";\n\nimport { TransformWrapper, TransformComponent } from \"react-zoom-pan-pinch\";\n\nconst Example = () => {\n  return (\n    <TransformWrapper\n      initialScale={1}\n      initialPositionX={200}\n      initialPositionY={100}\n    >\n      {({ zoomIn, zoomOut, resetTransform, ...rest }) => (\n        <React.Fragment>\n          <div className=\"tools\">\n            <button onClick={() => zoomIn()}>+</button>\n            <button onClick={() => zoomOut()}>-</button>\n            <button onClick={() => resetTransform()}>x</button>\n          </div>\n          <TransformComponent>\n            <img src=\"image.jpg\" alt=\"test\" />\n            <div>Example text</div>\n          </TransformComponent>\n        </React.Fragment>\n      )}\n    </TransformWrapper>\n  );\n};\n```\n\nor\n\n```tsx\nimport React, { useRef } from \"react\";\nimport {\n  TransformWrapper,\n  TransformComponent,\n  ReactZoomPanPinchRef,\n} from \"react-zoom-pan-pinch\";\n\nconst Controls = ({ zoomIn, zoomOut, resetTransform }) => (\n  <>\n    <button onClick={() => zoomIn()}>+</button>\n    <button onClick={() => zoomOut()}>-</button>\n    <button onClick={() => resetTransform()}>x</button>\n  </>\n);\n\nconst Component = () => {\n  const transformComponentRef = useRef<ReactZoomPanPinchRef | null>(null);\n\n  const zoomToImage = () => {\n    if (transformComponentRef.current) {\n      const { zoomToElement } = transformComponentRef.current;\n      zoomToElement(\"imgExample\");\n    }\n  };\n\n  return (\n    <TransformWrapper\n      initialScale={1}\n      initialPositionX={200}\n      initialPositionY={100}\n      ref={transformComponentRef}\n    >\n      {(utils) => (\n        <React.Fragment>\n          <Controls {...utils} />\n          <TransformComponent>\n            <img src=\"image.jpg\" alt=\"test\" id=\"imgExample\" />\n            <div onClick={zoomToImage}>Example text</div>\n          </TransformComponent>\n        </React.Fragment>\n      )}\n    </TransformWrapper>\n  );\n};\n```\n\n## License\n\nMIT © [prc5](https://github.com/prc5)\n","readmeFilename":"README.md"}