{"_id":"@algobot76/react-zoomy","_rev":"2-c32a2a20b37f03bc016b06d620393a9f","name":"@algobot76/react-zoomy","dist-tags":{"latest":"1.2.1"},"versions":{"1.2.0":{"name":"@algobot76/react-zoomy","main":"lib/react-zoomy.js","version":"1.2.0","license":"MIT","scripts":{"build":"./node_modules/webpack/bin/webpack.js --config webpack.config.js","serve":"./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config webpack-example.config.js","build-example":"./node_modules/webpack/bin/webpack.js --config webpack-example.config.js","deploy":"./node_modules/gh-pages/bin/gh-pages -d example"},"devDependencies":{"babel-core":"^6.23.1","babel-loader":"^6.3.1","babel-plugin-transform-react-jsx":"^6.23.0","babel-polyfill":"^6.23.0","babel-preset-es2015":"^6.22.0","babel-preset-stage-0":"^6.22.0","fuse-box":"^1.3.115","gh-pages":"^0.12.0","react":"^15.4.2","react-dom":"^15.4.2","react-hot-loader":"^1.3.1","webpack":"^1.10.1","webpack-dev-server":"1"},"dependencies":{"css-to-matrix":"^1.0.0"},"peerDependencies":{"react":"^15.4.2","react-motion":"^0.4.7","styled-components":"^1.4.3"},"gitHead":"06ec1d20a1c53ff87be6bd3f3a7fe0618ca838bb","description":"[Demo](https://chuson1996.github.io/react-zoomy/)","_id":"@algobot76/react-zoomy@1.2.0","_npmVersion":"6.4.1","_nodeVersion":"10.13.0","_npmUser":{"name":"algobot76","email":"xkaitian@gmail.com"},"dist":{"integrity":"sha512-85vEdXUcIXTlHTenVTxFH40StuA6tWqhi8U7G4ixdIs/E1HomEwsnTGHxCLZ2wWShT2Q41HjR7L0Yg96RNFZWA==","shasum":"a542d1694a36278e4671dc542e62369d6f7ff7e7","tarball":"https://registry.npmjs.org/@algobot76/react-zoomy/-/react-zoomy-1.2.0.tgz","fileCount":17,"unpackedSize":222876,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc3boACRA9TVsSAnZWagAAPS0P/jN7/sYSsUgX6DpNqnt8\n4iXXKTal9TLvKUk2mn2BBwbEuHqibpIKbOULdK9wQaKbAJVGl+IHZSFDvoNJ\nKfXKeasveIDhfvauEMk0dpoor2m7vPgusXJpv969uu7fROTjJk6543uca51g\nOWmcOgkros93Se3aCocvTStGPgTaajNEO+AGo9Zxlp4oIwwq0W/RmqGwctcH\nqnshddFO/f3up80HXYNHjdmm1ohWGT/bSKKz7onZEgWutofZKVEUe2M2t0HT\naU6piG4DSqiZpcrIeX4h1uZzsmuygYYrM04NsQVBqD3fFSp2sO+gSpSZKX0Y\npsPqOWv9MTiDFvxYAS0EKDsE3TiG+W12aWa1J6c2+Cfq/+3w/ZlTI23scNMp\nlFcd4T0vKAVhr8EvBlGdydZhO+KlO7Ell1HlA1FTHohsnASdZCCk2f5njjSD\nleJfkmt+z2KkcayvNGxxurSBgGzJxs2I8wSX0Wtgfk1SoSfi08Nu5Y03hCzf\neFEHSz0a8xP3YQS4aGJe7HcuXv+3tFm6C0H+iTixydJT3ySQm+FtT/Af4sVK\nf4d0VwY2eYOXtNGp6X40odcEsJI4di8iBOHgmHccgYZ8ZtENZxsqZH/JBe3X\naVp4A48FncRvOsjgN1iP4j1A6KHDpHRWHZF/Mfta4AwoWlva72EP2IxS7WR0\nZeoE\r\n=hlO8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGCGJef9pBTb4GuCmxJ1EqcC2cMx71/AbNZ0fTwC2S5pAiEA1fNE0LX4Wr/++vbwg8STjjLnt19O2y2vr1z5wjQWVtw="}]},"maintainers":[{"name":"algobot76","email":"xkaitian@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-zoomy_1.2.0_1558034943788_0.5453691501780327"},"_hasShrinkwrap":false},"1.2.1":{"name":"@algobot76/react-zoomy","main":"lib/react-zoomy.js","version":"1.2.1","license":"MIT","scripts":{"build":"./node_modules/webpack/bin/webpack.js --config webpack.config.js","serve":"./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config webpack-example.config.js","build-example":"./node_modules/webpack/bin/webpack.js --config webpack-example.config.js","deploy":"./node_modules/gh-pages/bin/gh-pages -d example"},"devDependencies":{"babel-core":"^6.23.1","babel-loader":"^6.3.1","babel-plugin-transform-react-jsx":"^6.23.0","babel-polyfill":"^6.23.0","babel-preset-es2015":"^6.22.0","babel-preset-stage-0":"^6.22.0","fuse-box":"^1.3.115","gh-pages":"^0.12.0","react":"^15.4.2","react-dom":"^15.4.2","react-hot-loader":"^1.3.1","webpack":"^1.10.1","webpack-dev-server":"1"},"dependencies":{"css-to-matrix":"^1.0.0"},"peerDependencies":{"react":"^15.4.2","react-motion":"^0.4.7","styled-components":"^1.4.3"},"gitHead":"867eb51fb0ac5da70a929e8edefded813218e440","description":"[Demo](https://chuson1996.github.io/react-zoomy/)","_id":"@algobot76/react-zoomy@1.2.1","_npmVersion":"6.4.1","_nodeVersion":"10.13.0","_npmUser":{"name":"algobot76","email":"xkaitian@gmail.com"},"dist":{"integrity":"sha512-wlx/nUoh9lGwcR46DC1ajMujzCi6Gj/0Z/MvbL9YGPEGcgzXECIzS4ng0lu7C/EC1pP45kvSFT21eNs+ey/NNg==","shasum":"07e8c16d8d6babc7ab893def00d5062f52202ec2","tarball":"https://registry.npmjs.org/@algobot76/react-zoomy/-/react-zoomy-1.2.1.tgz","fileCount":17,"unpackedSize":222099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc3bs1CRA9TVsSAnZWagAAoaEP/iTWTWV3oBgaFN6ZrgC9\n3KVDhKIxE8klkTsuvE+cw1j7nN7kYwzTO2ba7AZ0sL5jyEXJb0Q1WH7HyW9l\ntYaQMv1DWoKL+UC9TlriWfu7CKKpsLVCuYsghsXhEVQ7rwOam+9uffIJ2/N7\n7jdAI1wPmwv0PFeJyTaiMxXqD97Rt85NnbJ0Hb2BfHaNowcOgCft2/1NNzbu\njEuHLfhjMEu47aNoEjbYZfNlm1OORD+KwidyWQ/h7s4r6bXQTROsWQVoQ9Q3\nW+h4JE4jwKoWZ99+fBZmS8WvofU0uG5isJoyIeGtbBIB6znkoOI9vMTy6REh\ncwJwZrbGbjsoXcI4vHGHwWRKuVYwI7KjxLL5WkZaT4nm3x4bP97NBxvNjdyZ\nWoTCKI2XQUlVmTrJSCYG7TlnRvpMQBgYlOTgJZEcX1klnhULPUj3jm8PPjRK\ncYxg9g16KkywXU05mn9amSc7iUWLiLOZdovh3/ccdmjvYYt4qRxjzMvNqobC\naBVTm7Lcqt6RAU5RXn00MeafqOH1YGyns8u0m32GxrGUhZKWVCu4Q3nPsHCu\n+4SmXNZrDLo5VR9562ICPSJ8PvcFcf3HT1O4UFfmIJqtxK24IeRYHwCs1qYM\n6SKzjGIVDb5xsSgC5bH3pQa7CyDauRxWOfQ9wP7gCNU1ucsutP4Chq3McS3G\nvq2j\r\n=u2l1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2PhoCmu4AXU+/MDK+swzeBcs5QT9vcFAAlK8BXAOf2gIgPoxCmrZbBzwa8DyNoNt5rWEXhDc1GgMqDs8HfxS90Z8="}]},"maintainers":[{"name":"algobot76","email":"xkaitian@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-zoomy_1.2.1_1558035252157_0.10835650285210363"},"_hasShrinkwrap":false}},"time":{"created":"2019-05-16T19:29:03.753Z","1.2.0":"2019-05-16T19:29:03.981Z","modified":"2022-04-04T12:51:36.627Z","1.2.1":"2019-05-16T19:34:12.344Z"},"maintainers":[{"name":"algobot76","email":"xkaitian@gmail.com"}],"description":"[Demo](https://chuson1996.github.io/react-zoomy/)","license":"MIT","readme":"# react-zoomy\n\n[Demo](https://chuson1996.github.io/react-zoomy/)\n\n[Live Demo - Tutorial](https://www.youtube.com/watch?v=shIeuTM_6t0)\n\nPeer dependencies: `react-motion` and `styled-components`. Yep, I know, that means you have to install them.\n\nInstall `npm install --save react-zoomy`\n\n### Props:\n\n**1. imageUrl**: String (required)\n\nUrl of the image\n\n**2. renderThumbnail**: Function (required). `({ showImage }) => React Element`\n\nCall `showImage()` to display to image\n\nExample:\n```js\nimport ReactZoomy from 'react-zoomy';\n\n<ReactZoomy\n  imageUrl={'https://images.unsplash.com/photo-1487309078313-fad80c3ec1e5?dpr=2&auto=format&fit=crop&w=767&h=1023&q=80&cs=tinysrgb&crop='}\n  renderThumbnail={({ showImage }) => <button onClick={showImage}>Show Image</button>}\n  scale={[1.1, 1.1]}\n  imageProps={{\n    style: {\n      width: '100vw',\n      height: 'auto'\n    }\n  }}\n/>\n```\n\n**3. scale**: \\[scaleX: Number, scaleY: Number\\] (optional). Default [1, 1]\n\nTo scale the image.\n\n**4. renderCursor**: Function (optional). \n`({ style, isImageShowed }) => React Element`\n\nJust in case you want to have a custom cursor when moving over the picture. Apply `style` prop to your react element. `isImageShowed` prop indicates when the image is displayed or not.\n\n**5. renderLoadingElement**: Function (optional). \n`({ isImageShowed, isImageLoaded, done }) => React Element`\n\nThis is optional. If you wish to have something before sliding the image in (or simply to deplay it), you would need to declare this prop. `isImageShowed` and `isImageLoaded` is pretty declarative themselves. Call `done()` to start sliding the image in.\n\n**6. imageContainerProps**: Object (optional)\n\nProps passed down to the container of the image\n\n**7. imageProps**: Object (optional)\n\nProps passed down to the image\n","readmeFilename":"README.md"}