{"_id":"@codemayonnaise/react-zoom-pan-pinch","_rev":"1-f10625bbae16e079be19111795e387ca","name":"@codemayonnaise/react-zoom-pan-pinch","dist-tags":{"latest":"1.6.3"},"versions":{"2.6.1":{"name":"@codemayonnaise/react-zoom-pan-pinch","version":"2.6.1","description":"Zoom and pan html elements in easy way","author":{"name":"prc5"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/codemayonnaise/react-zoom-pan-pinch.git"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","source":"src/index.ts","jsnext:main":"dist/index.esm.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"react-scripts test --watchAll=false --passWithNoTests","build":"rollup -c","build:docs":"build-storybook","start":"start-storybook -p 6006 --no-manager-cache","lint":"eslint 'src/**/*.{js,jsx,ts,tsx}' --fix","prepare":"install-peers && yarn build","predeploy":"yarn run build:docs","deploy":"gh-pages -d storybook-static","test:lint":"eslint src/ --ext .js,.jsx,.tsx,.ts","test:prettier":"npm run prettier -check \"**/*.+(js|json|ts|tsx)\""},"peerDependencies":{"react":"*","react-dom":"*"},"devDependencies":{"@babel/core":"^7.20.12","@babel/runtime":"^7.20.13","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-typescript":"^8.2.1","@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","cross-env":"^7.0.3","eslint":"^8.17.0","eslint-config-airbnb":"^18.2.1","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","postcss":"^8.2.13","prism-react-renderer":"^1.2.1","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","source-map-loader":"^2.0.1","ts-loader":"^9.4.2","typescript":"^4.2.3","webpack":"5","webpack-cli":"^5.0.1"},"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":"8775f0f06e1ab136b119c18706a85567fd4b75ad","bugs":{"url":"https://github.com/codemayonnaise/react-zoom-pan-pinch/issues"},"homepage":"https://github.com/codemayonnaise/react-zoom-pan-pinch#readme","_id":"@codemayonnaise/react-zoom-pan-pinch@2.6.1","_nodeVersion":"16.19.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-Oj4ykw9I4MhM5TUKr04ZbEjqAo3Jcl7QbSPKw2itgO1kDrUNtg0w1296eSO3aX0J8Ye/cF57KkiDqA/AducKvw==","shasum":"0b5209fc75eed8fe7e9fab14519e466b5f2110a6","tarball":"https://registry.npmjs.org/@codemayonnaise/react-zoom-pan-pinch/-/react-zoom-pan-pinch-2.6.1.tgz","fileCount":132,"unpackedSize":3100243,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCccZH7dexVSstojuuD19kuTDeQ+iAPxU1IjYxtduiRwIgInF0nFiYz05GZK025pI5uUsTjLO/qTQunnBycDqdnB0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj9iMeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAtRAAiXJ0YJTEgfl9pq0T4pdLYTFwvFMxREwRYFa8IGdEkzMDHvxK\r\nQJG3t9O9UxTQiTWr4X29UuiCYOoqsCUSaqb7umjZ+OTW/d4e6498UYEy+7d+\r\n8ZgxuU2B8wN013wyOvh1chrG5zQusnNTSz0SRfwQNjTogdYwXTUAtAPAaksD\r\n7IwGVWuLFTpc+btHJmMWHmaeGZMP2oqS+R9JvdJgWhPR+BNO2oy6Sir6dGS9\r\n6vAiURxPCUvbUcL/oOuOK9aMiJL1uoyOVwkHWj6cO2gru5ibKvJ1X5E/IbOn\r\nat6Et1E5t0jZh8BzWkZf4YnvNpeCPUW/8AZe2E4ILQvjzU/2fLGh/bS4L3pI\r\ntSDFF+Cr3L1JeNp1lBbKagZXd7Rhi2lsSY3QjAmltcCOAZf9jBjOdhGPFBau\r\nCsjGAIy8trx6m/BxFJBrxnzhJShwwf5Tyzvis/RXY45xHhKkStNXprzZkNcX\r\nNTPl/T7hfWPs53jNVRzOO/bWLpvlHcAVXmcGzeEf90n5MWJWsKU1LqOoeBIx\r\nCPX9YTslGSuvtSHEMURKjA8Hx7xGdfzUMfmy8XtGdLEAyHPZ18PKvlHWvPzx\r\nihwaAOIPNr9K/kKwTbUER+pqflhsHU9PA9KCTt2vIVIXC/jx6sZjVjDjSUrQ\r\n38pvUuPhtIwKMFLaiSmanrJK+uYX9hUgoUM=\r\n=aQ/x\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"codemayonnaise","email":"christopher.tokar@ibm.com"},"directories":{},"maintainers":[{"name":"codemayonnaise","email":"christopher.tokar@ibm.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-zoom-pan-pinch_2.6.1_1677075229851_0.35065150669048895"},"_hasShrinkwrap":false},"1.6.3":{"name":"@codemayonnaise/react-zoom-pan-pinch","version":"1.6.3","description":"Zoom and pan html elements in easy way","author":{"name":"prc5"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/codemayonnaise/react-zoom-pan-pinch.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"react-scripts test --env=jsdom --testPathIgnorePatterns=utils shared","test:watch":"react-scripts test --watch --env=jsdom --testPathIgnorePatterns=utils shared","test:verbose":"react-scripts test --verbose --env=jsdom --testPathIgnorePatterns=utils shared","build":"rollup -c","start":"rollup -c -w","lint":"eslint 'src/**/*.{js,jsx,ts,tsx}' --fix","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","deploy":"gh-pages -d example/build"},"peerDependencies":{"prop-types":"^15.5.4","react":">=16.8.0","react-dom":">=17.0.2"},"devDependencies":{"@babel/core":"^7.0.0","@babel/runtime":"^7.0.0","@svgr/rollup":"^2.4.1","@testing-library/react":"^9.3.2","@types/jest":"^23.1.5","@types/react":"^16.8.0","@types/react-dom":"^16.8.0","@typescript-eslint/parser":"^2.6.1","all-contributors-cli":"^6.9.3","babel-eslint":"9.0.0","cross-env":"^5.1.4","eslint":"5.12.0","eslint-config-airbnb":"17.1.1","eslint-config-prettier":"^6.0.0","eslint-plugin-flowtype":"^3.12.1","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.0","eslint-plugin-react":"^7.14.2","gh-pages":"^1.2.0","react":"^16.11.0","react-dom":"^16.11.0","react-scripts":"^2.1.0","rollup":"^1.26.3","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","source-map-loader":"^0.2.4","ts-loader":"^6.2.1","typescript":"^3.3.0","webpack-cli":"^3.3.10"},"dependencies":{},"keywords":["react","zoom","pan","pinch","animation","velocity","css","fast","transformations","scale","drag","viewer","reacts","touch","css3","svg","bounds","context"],"gitHead":"8382ba3be5c7b3f4389ba4824f65b853534ae59a","bugs":{"url":"https://github.com/codemayonnaise/react-zoom-pan-pinch/issues"},"homepage":"https://github.com/codemayonnaise/react-zoom-pan-pinch#readme","_id":"@codemayonnaise/react-zoom-pan-pinch@1.6.3","_nodeVersion":"14.20.0","_npmVersion":"6.14.17","dist":{"integrity":"sha512-t+lfh0p1E33/yeRUj37SzgNFlm+zZlo5f3g80pvb0Zp76ZEeC9Wuv7CrPpFL0dM4NkWcCBmvR8hqQFHtyYWPrQ==","shasum":"34128c0d0da60874d88bd5fd4a4230b6c2c267b0","tarball":"https://registry.npmjs.org/@codemayonnaise/react-zoom-pan-pinch/-/react-zoom-pan-pinch-1.6.3.tgz","fileCount":77,"unpackedSize":807239,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGAF9ijbp9gUor91qO47rc3sd23ow6e9YsPiKOE6R5KwIgCKtQS1N1PHsemF/qTeE2Ig7P0JuWYXC1GPscYiHVDEU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj9iaRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpChw/6A6KWIzVEXdMy1Wz/5dI1NWsUGqAzaUG0W2HYdHX5IRJ8ui0U\r\nE+p9FUgAcNhs8oYEBabKdzgOy7M1gUS9kid0O5WNDF5YI1DeWLO0EqzYGuYh\r\nu4DjShQngXrZtg3E1RC8Jby/895td0+ZsWm/z4UWmN3qC5JdrYYhnINDhXS4\r\nKqnqzJcPBPmCedmyFNmnZaG8wMnQK15kNlIC+FgXei0ZoYpN5kQJU6nGSKcx\r\nmEBJimfdpEJLIEyDQ0lRYHt+pStlqi61LgUcBnvlQhCNvbRWvoYUFfA6+jWO\r\nHeQNOJAJFyMCyXKve5A272hdw8Bk5hTv+X2y/lWpSsUNIRaKkLnkxFROV9Yb\r\n6gZi0oWdlr05/pK1GKyhApPKENQx+IPZNvH2BMmz6kre4c4ZJeow0/BF1JQt\r\nqUESDHsp4cFD+b5+WJ+q1rBhgGWFyRw5IYhawzBZx7ReNvaUeZXpl5GV5EiE\r\nm6AjcpYCgsFKfPh0Qij0+ZRapKfeMYzX8w45wNAppDEdtWz+wSJOGPQL/jTt\r\nFm4AxZeiEjR0pFc3/+Qx9x73ZiTfFdpWuXBVbi4ubs7P15zZHb1KgIutsH1h\r\nV8q5C0jz79uHa8LHipBsN2aesOtnAdIDV0a+ZQzyZmdz/PAbU4Inlf+yxWIG\r\nYovi0BwZuaQExEdoSBHA6UWUqpb/gZfsfKU=\r\n=PMk+\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"codemayonnaise","email":"christopher.tokar@ibm.com"},"directories":{},"maintainers":[{"name":"codemayonnaise","email":"christopher.tokar@ibm.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-zoom-pan-pinch_1.6.3_1677076113140_0.0740829537928045"},"_hasShrinkwrap":false}},"time":{"created":"2023-02-22T14:13:49.754Z","2.6.1":"2023-02-22T14:13:50.030Z","modified":"2023-02-22T14:28:33.558Z","1.6.3":"2023-02-22T14:28:33.433Z"},"maintainers":[{"name":"codemayonnaise","email":"christopher.tokar@ibm.com"}],"description":"Zoom and pan html elements in easy way","homepage":"https://github.com/codemayonnaise/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/codemayonnaise/react-zoom-pan-pinch.git"},"author":{"name":"prc5"},"bugs":{"url":"https://github.com/codemayonnaise/react-zoom-pan-pinch/issues"},"license":"MIT","readme":"# react-zoom-pan-pinch\n\n[![NPM](https://img.shields.io/npm/v/react-zoom-pan-pinch.svg)](https://www.npmjs.com/package/react-zoom-pan-pinch)\n![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-zoom-pan-pinch)\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n![NPM](https://img.shields.io/npm/l/react-zoom-pan-pinch)\n![npm](https://img.shields.io/npm/dm/react-zoom-pan-pinch)\n![GitHub stars](https://img.shields.io/github/stars/prc5/react-zoom-pan-pinch?style=social)\n\n> Super fast and light react npm package for zooming, panning and pinching html\n> elements in easy way\n\n## Features\n\n- :rocket: Fast and easy to use\n- :factory: Light, without external dependencies\n- :gem: Mobile gestures, touchpad gestures and desktop mouse events support\n- :gift: Powerful context usage, which gives you a lot of freedom\n- :wrench: Highly customizable\n- :crown: Animations and many options\n\n## DEMO\n\n[DEMO EXAMPLE](https://prc5.github.io/react-zoom-pan-pinch/)\n\n## Install\n\n```bash\nnpm install --save react-zoom-pan-pinch\n```\n\nor\n\n```bash\nyarn add react-zoom-pan-pinch\n```\n\n## Usage\n\n```jsx\nimport React, { Component } from \"react\";\n\nimport { TransformWrapper, TransformComponent } from \"react-zoom-pan-pinch\";\n\nclass Example extends Component {\n render() {\n return (\n \n \n \"test\"\n \n \n );\n }\n}\n```\n\nor\n\n```jsx\nimport React, { Component } from \"react\";\n\nimport { TransformWrapper, TransformComponent } from \"react-zoom-pan-pinch\";\n\nclass Example extends Component {\n render() {\n return (\n \n {({ zoomIn, zoomOut, resetTransform, ...rest }) => (\n \n
\n \n \n \n
\n \n \"test\"\n
Example text
\n \n \n )}\n \n );\n }\n}\n```\n\n## Props of TransformWrapper\n\n| Props | Default | Type |\n| :--------------- | :-----: | -------: |\n| scale | 1 | number |\n| positionX | auto | number |\n| positionY | auto | number |\n| defaultPositionX | null | number |\n| defaultPositionY | null | number |\n| defaultScale | null | number |\n| options | {...} | object |\n| wheel | {...} | object |\n| pan | {...} | object |\n| pinch | {...} | object |\n| zoomIn | {...} | object |\n| zoomOut | {...} | object |\n| doubleClick | {...} | object |\n| reset | {...} | object |\n| scalePadding | {...} | object |\n| onWheelStart | null | Function |\n| onWheel | null | Function |\n| onWheelStop | null | Function |\n| onPanningStart | null | Function |\n| onPanning | null | Function |\n| onPanningStop | null | Function |\n| onPinchingStart | null | Function |\n| onPinching | null | Function |\n| onPinchingStop | null | Function |\n| onZoomChange | null | Function |\n| enablePadding | true | Boolean |\n| enablePanPadding | true | Boolean |\n\n#### Options prop elements\n\n| Props | Default | Type |\n| :--------------- | :-----: | -----------: |\n| disabled | false | boolean |\n| transformEnabled | true | boolean |\n| minPositionX | null | null, number |\n| maxPositionX | null | null, number |\n| minPositionY | null | null, number |\n| maxPositionY | null | null, number |\n| minScale | 1 | number |\n| maxScale | 8 | number |\n| limitToBounds | true | boolean |\n| limitToWrapper | false | boolean |\n| centerContent | true | boolean |\n\n#### scalePadding prop elements\n\n| Props | Default | Type |\n| :------------ | :-----: | ------: |\n| disabled | false | boolean |\n| size | 0.45 | number |\n| animationTime | 200 | number |\n| animationType | easeOut | string |\n\n#### Wheel prop elements\n\n| Props | Default | Type |\n| :-------------- | :-----: | ------: |\n| disabled | false | boolean |\n| step | 6.5 | number |\n| wheelEnabled | true | boolean |\n| touchPadEnabled | true | boolean |\n| limitsOnWheel | true | boolean |\n\n#### Pan prop elements\n\n| Props | Default | Type |\n| :-------------------- | :-----: | ----------------------------------------------: |\n| disabled | false | boolean |\n| disableOnTarget | [] | array of class names or node tags (div,span...) |\n| lockAxisX | false | boolean |\n| lockAxisY | false | boolean |\n| velocity | false | boolean |\n| velocityEqualToMove | false | boolean |\n| velocitySensitivity | 1 | number |\n| velocityMinSpeed | 1.2 | number |\n| velocityBaseTime | 1800 | number |\n| velocityAnimationType | easeOut | string |\n| padding | true | boolean |\n| paddingSize | 40 | number |\n| animationTime | 200 | number |\n| animationType | easeOut | string |\n\n#### Pinch prop elements\n\n| Props | Default | Type |\n| :------- | :-----: | ------: |\n| disabled | false | boolean |\n\n#### zoomIn prop elements\n\n| Props | Default | Type |\n| :------------ | :-----: | ------: |\n| disabled | false | boolean |\n| step | 70 | number |\n| animation | true | boolean |\n| animationTime | 200 | number |\n| animationType | easeOut | string |\n\n#### zoomOut prop elements\n\n| Props | Default | Type |\n| :------------ | :-----: | ------: |\n| disabled | false | boolean |\n| step | 70 | number |\n| animation | true | boolean |\n| animationTime | 200 | number |\n| animationType | easeOut | string |\n\n#### doubleClick prop elements\n\n| Props | Default | Type |\n| :------------ | :-----: | -----------------------: |\n| disabled | false | boolean |\n| step | 70 | number |\n| animation | true | boolean |\n| animationTime | 200 | number |\n| animationType | easeOut | string |\n| mode | zoomIn | zoomIn / zoomOut / reset |\n\n#### reset prop elements\n\n| Props | Default | Type |\n| :------------ | :-----: | ------: |\n| disabled | false | boolean |\n| animation | true | boolean |\n| animationTime | 200 | number |\n| animationType | easeOut | string |\n\n#### Animations types\n\n| Value |\n| :------------- |\n| easeOut |\n| linear |\n| easeInQuad |\n| easeOutQuad |\n| easeInOutQuad |\n| easeInCubic |\n| easeOutCubic |\n| easeInOutCubic |\n| easeInQuart |\n| easeOutQuart |\n| easeInOutQuart |\n| easeInQuint |\n| easeOutQuint |\n| easeInOutQuint |\n\n#### Double click modes\n\n| Value |\n| :------ |\n| zoomIn |\n| zoomOut |\n| reset |\n\n## Values returned from TransformWrapper component\n\n| Value | Description | Type |\n| :---------------------------------------------------------------------- | :--------------------------------------------- | :------------: |\n| setScale(scale, animationTime, animationType) | Sets scale | Number |\n| setPositionX(positionX, animationTime, animationType) | Sets position x | Number |\n| setPositionY(positionY, animationTime, animationType) | Sets position y | Number |\n| zoomIn() | Zooming in function, used for controls button | --- |\n| zoomOut() | Zooming out function, used for controls button | --- |\n| setTransform(positionX, positionY, scale, animationTime, animationType) | Sets transformations of content | Number or null |\n| resetTransform() | Reset transformations to the initial values | Number |\n\n## License\n\nMIT © [prc5](https://github.com/prc5)\n\n## Contributors ✨\n\nThanks goes to these wonderful people\n([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n \n \n \n \n
\"\"/
Maciej Pyrc
👀 💻 🚇 🚧 💡 💬		\"\"/
Shaneeza
🐛		\"\"/
gabrielfmp
💻		\"\"/
Pablo Vega Uceta
💻		\"\"/
Selvam M
💻		\"\"/
David Liu
💻
\n\n\n\n\n\n\nThis project follows the\n[all-contributors](https://github.com/all-contributors/all-contributors)\nspecification. Contributions of any kind welcome!\n","readmeFilename":"README.md"}