{"_id":"@arist0tl3/react-zoom-pan-pinch","_rev":"1-89d2a2b152e364ab106bc257c0c6df68","name":"@arist0tl3/react-zoom-pan-pinch","dist-tags":{"latest":"1.6.2"},"versions":{"1.6.2":{"name":"@arist0tl3/react-zoom-pan-pinch","version":"1.6.2","description":"Zoom and pan html elements in easy way","author":{"name":"prc5"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/arist0tl3/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":"^15.0.0 || ^16.0.0","react-dom":"^15.0.0 || ^16.0.0"},"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":"8161d6a5a9be8ec01c4943f98cd407ae8b041aba","bugs":{"url":"https://github.com/arist0tl3/react-zoom-pan-pinch/issues"},"homepage":"https://github.com/arist0tl3/react-zoom-pan-pinch#readme","_id":"@arist0tl3/react-zoom-pan-pinch@1.6.2","_nodeVersion":"13.7.0","_npmVersion":"6.13.6","dist":{"integrity":"sha512-UfAbHogz6hXnBzCVlMrJanAe2Cq3nhOjuR+PacNuEoV7jfcuOno+rJX9f+FYFTNCZDJxfCBkXzR8eRpklJQefw==","shasum":"b7e2252c27fa29ce93ac9fa0b382c907aaba8b36","tarball":"https://registry.npmjs.org/@arist0tl3/react-zoom-pan-pinch/-/react-zoom-pan-pinch-1.6.2.tgz","fileCount":25,"unpackedSize":432386,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRu0wCRA9TVsSAnZWagAA/78P/3c4hXvU3P4+JoD9T5f4\nEceEjSWvT9LbkAZo2Tw950prr3IJ421tCe6JhkNikiGTS367aEPQVm3QE+oZ\nMS1+jG8ae6z/A1RaaRPtSv5MtU1DF1ajjGSeMiUSzGqrtZsmBd1Sc4nI0y/E\nO5Cx3/NTSuYmWCqo5Ev57MZAUHxsJREQWzSTD92UDJ7z2W1a9q58t2N6pxsZ\nTJdo2vhCdsHEgkebP43gqwA1Jj+rE9pk4xKs8BvrSJdYUtQY0XqShG63W7RS\nfGg3C+HoqBKEEZjtybYBpKcIYaaGLaIrjArP2uB2mCfd1tFNUdkDcsZ6Js6a\nkn1ugQsviQ8SMP6kcFTyeqEOabSlPxtgwHGSX9xJ9IWtZ2m2rsljNi7odFhZ\nliofKtz8B+NXLtg3O2a84YSOL3RYYZwlvE3LYdg6DP+jJ8Nfd/d10+KFGoCf\nOcqGJ6jg6ztqr1UWJGXpyofHeRVHJ9DYVXbq2gp3DwUcgLTKNp93yiFDlZaB\nWKOJyNMqAewuy5aofP/cji2zbKa8sp73cNfWLZwlgHnZBxOWUqtLtQ86QPqu\n+apjUTG9fIOCvdMndlYfiLB1YvwOQ0z4KgUyr8BC81NrSlwP6B2FDRVqXkCG\ncJAWSlMtv9czNUnyUE+TdfAIPczpe7xO5t6lM0tRfqVMohga44Snvq+fpCGb\n5kkv\r\n=+KYL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDGH7mIF4KiTEayCYp3Ix+AZrTVwlJ43bEnwLFibbrnWwIhAKg1EFZfH+VLHUsZo4OxH5wX6TxJpl0Zznnz7fI4TG8C"}]},"maintainers":[{"name":"arist0tl3","email":"sean@vigorwebsolutions.com"}],"_npmUser":{"name":"arist0tl3","email":"sean@vigorwebsolutions.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-zoom-pan-pinch_1.6.2_1598483759635_0.19018697555941144"},"_hasShrinkwrap":false}},"time":{"created":"2020-08-26T23:15:59.589Z","1.6.2":"2020-08-26T23:15:59.794Z","modified":"2022-04-04T15:27:55.431Z"},"maintainers":[{"name":"arist0tl3","email":"sean@vigorwebsolutions.com"}],"description":"Zoom and pan html elements in easy way","homepage":"https://github.com/arist0tl3/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/arist0tl3/react-zoom-pan-pinch.git"},"author":{"name":"prc5"},"bugs":{"url":"https://github.com/arist0tl3/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"}