{"_id":"@baic/react-wx-images-viewer","_rev":"2-730dbe0e30f9056adb843a3eefda7f35","name":"@baic/react-wx-images-viewer","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@baic/react-wx-images-viewer","version":"1.0.0","description":"Images viewer is a react component use in mobile website App, that function same as Weixin native viewer.","main":"dist/index.js","scripts":{"start":"webpack-dev-server --config webpack.config.js","pub":"gulp && npm publish --access=public"},"license":"MIT","devDependencies":{"autoprefixer":"^7.1.1","babel-core":"^6.24.1","babel-eslint":"^8.2.1","babel-loader":"^7.0.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","babel-preset-stage-1":"^6.24.1","css-loader":"^0.28.4","eslint":"^4.17.0","eslint-config-airbnb":"^16.1.0","eslint-plugin-babel":"^4.1.2","eslint-plugin-compat":"^2.2.0","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^6.0.3","eslint-plugin-react":"^7.6.1","file-loader":"^0.11.1","gulp":"^3.9.1","gulp-babel":"^6.1.2","gulp-clean":"^0.3.2","gulp-gh-pages-will":"^0.5.4","gulp-less":"^3.3.2","gulp-util":"^3.0.8","html-webpack-plugin":"^2.28.0","less":"^2.7.2","less-loader":"^4.0.4","postcss-loader":"^2.0.5","react":"^16.0.0","react-dom":"^16.0.0","react-hot-loader":"^3.0.0-beta.7","style-loader":"^0.18.1","url-loader":"^0.5.8","vinyl-ftp":"^0.6.0","webpack":"^2.6.1","webpack-dev-server":"^2.4.5"},"dependencies":{"gulp-terser":"^1.4.0","prop-types":"^15.7.2","raf":"^3.4.1"},"gitHead":"a81bb8a28c4804b10c6fbef23e6b77dd0a8da726","_id":"@baic/react-wx-images-viewer@1.0.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"baic","email":"303394539@qq.com"},"dist":{"integrity":"sha512-r+4HeIpM2eGGouSW1GJII7GBXhWXl3MAcXZfA5njG/H0b4DQHZzqqMLbyUIbdk74Rcky5wx5sM/RYGm1vHgVMQ==","shasum":"e063a733695bebbab26227f2fe8ffaa7324aba4f","tarball":"https://registry.npmjs.org/@baic/react-wx-images-viewer/-/react-wx-images-viewer-1.0.0.tgz","fileCount":26,"unpackedSize":414200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTLv3CRA9TVsSAnZWagAAiGYP/jFH67tIfiOL1QQW031b\nO3CCMdu3yDFZfSYleMW7wmfhA5y1eLEztmUUV+KifyyOGdOggHB3gao+QoNb\niSkIwcE1f/DAKsjutZqt5nvY/JQZ77uSmrkcdSq8OxWrc99FynvtFMnCUebn\n3bxufJara6ErzKojSE92AV8tBru9HxF31CE5GGdNegK6DoFkfEUy8hnlgAik\nq1cf5BIGWMMQlxd/EKglcL5Bx3Vv14UMAIW2FF0kC/j+HNdXYJJm/DSspFR7\nB4/wQp2o6zFd6CUKosJcmw5Ir7W4TcIoJLPggVNLubUo4FsOsetkI+OQc4fJ\n67ODYAAMwipFCaWWvO16D7ZGhzuyNfO1xYYjRfVDqUVhwb2L1LXJpHNtAlfb\nbKSkjACZGq2aooGEiEQcVDE+pIaUSUQq91lJhAqOmOAgJZTaGwUt7G2CoiLg\n3ltM6bu2bJPA0bMjMSBBwylvmWb657fcJEBlSVitOBjtvwEupnL0qo3tAeQU\nO+m3VZ56kh5oDZOGfGS6M6WINtQnpdAvLZ23pwdz/8UnBR1TvLB3nLx9s46A\nZWliJZkifQZpinhb8w0cPn3tXfIPaLeCrwA8+jKSd2uJxNI9Nd8aMUEQTVFW\n5ryes2ZcLqK+JNXRBcgIgpinQfrIJ5rXClaI01Vetev2hK3sBprqPSFvmRj+\n8VH5\r\n=V2vK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCaY8sZldPFKsOJsUp3Qpcr+0NNLOWHh7VPFq5nTAiUNAIgHyMlWE8NaueYauO9Vr6x2W/LC67dF40WeHwpkYfTZlA="}]},"maintainers":[{"name":"baic","email":"303394539@qq.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-wx-images-viewer_1.0.0_1598864374942_0.2419786598675795"},"_hasShrinkwrap":false},"1.0.1":{"name":"@baic/react-wx-images-viewer","version":"1.0.1","description":"Images viewer is a react component use in mobile website App, that function same as Weixin native viewer.","main":"dist/index.js","scripts":{"start":"webpack-dev-server --config webpack.config.js","pub":"gulp && npm publish"},"license":"MIT","devDependencies":{"autoprefixer":"^7.1.1","babel-core":"^6.24.1","babel-eslint":"^8.2.1","babel-loader":"^7.0.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","babel-preset-stage-1":"^6.24.1","css-loader":"^0.28.4","eslint":"^4.17.0","eslint-config-airbnb":"^16.1.0","eslint-plugin-babel":"^4.1.2","eslint-plugin-compat":"^2.2.0","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^6.0.3","eslint-plugin-react":"^7.6.1","file-loader":"^0.11.1","gulp":"^3.9.1","gulp-babel":"^6.1.2","gulp-clean":"^0.3.2","gulp-gh-pages-will":"^0.5.4","gulp-less":"^3.3.2","gulp-util":"^3.0.8","html-webpack-plugin":"^2.28.0","less":"^2.7.2","less-loader":"^4.0.4","postcss-loader":"^2.0.5","react":"^16.0.0","react-dom":"^16.0.0","react-hot-loader":"^3.0.0-beta.7","style-loader":"^0.18.1","url-loader":"^0.5.8","vinyl-ftp":"^0.6.0","webpack":"^2.6.1","webpack-dev-server":"^2.4.5"},"dependencies":{"gulp-terser":"^1.4.0","prop-types":"^15.7.2","raf":"^3.4.1"},"gitHead":"a81bb8a28c4804b10c6fbef23e6b77dd0a8da726","_id":"@baic/react-wx-images-viewer@1.0.1","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"baic","email":"303394539@qq.com"},"dist":{"integrity":"sha512-rCEw+JUGvonfAPH9s81Z9tmXBnCL9fote52yFvcHLmv7eFog9ry7jsBRuQM6Xwm8gEaeWcwthdobNc/lH0dX7A==","shasum":"5239fbaf06355bba3c495f7e945b5d89fcbda230","tarball":"https://registry.npmjs.org/@baic/react-wx-images-viewer/-/react-wx-images-viewer-1.0.1.tgz","fileCount":12,"unpackedSize":30401,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTLxZCRA9TVsSAnZWagAAGNgP/RyxhQeBn4oWYK7tcOFS\nwdl5053q6C5Qcy3d20G2gWHMstlhx2GyWOVImIq4dyWrmqXpCCq6UqunQliH\nlXFM5xl6QA+j4qO7L9NqpDjTIjBA8n4kcP0IP1drnT+DMN098poiO77/+ls7\ncoxPupVkFbH4ThqV3Z8CBpZA0nr9qWrisHAS1sPm3VJ/5fOqtmbdprQ/NfAe\noO3qyfVAnvEWzeM42UPq4lyruSR1rkdhFeSJkyxn2/qauATc87QBqqi4kywj\nQH/GAFaQ78zk5FKEjWf4wxV8mcOctyaBzX+b/ktBQnOxEHn+tO3gxo0hOAZy\n07uk98hSzC9dZaVpYodhMFEp3QIlVUs0O4pdLPUxq5OjMWsC/VmuGjWe4SGm\nHotzW/lT+QRw6/OiuunZjKYQSfx20eY1VpGGlkimBKDKd4MNQiL/vDQU8vCL\nEkiJm7LxbNnWikpcfBg5rLet6ctsbDY0Ao2s9PLq3JPEUG3U8S6vp3LN2u9o\nVE/+q+Z8GOE0gns/SvZC7O1I7JIVHseftYZCt496OZmLSi5D59MZHu6b2wso\nmJJvDs9b05/2go06d0l+GjDA9ZcbYIqYfD09Hla0k83bkMXPNN5UQYvQ+1N0\nPP9wRlf7soqdv5z94xn2a1Yl2HsdgZ+nIDwMJFRfNYgLGQA7JLLgguJG04lA\nznHH\r\n=5pSr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHbLpDzzdh++56aZxJKV8uZ4C1nWxE4s5CS6m2sdqXVQIgN21DgX7shDEALKO6MPVVz3G/k6xYVX4KCWaj94AYieg="}]},"maintainers":[{"name":"baic","email":"303394539@qq.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-wx-images-viewer_1.0.1_1598864473059_0.26417933935139515"},"_hasShrinkwrap":false}},"time":{"created":"2020-08-31T08:59:34.894Z","1.0.0":"2020-08-31T08:59:35.120Z","modified":"2022-04-04T17:30:53.924Z","1.0.1":"2020-08-31T09:01:13.171Z"},"maintainers":[{"name":"baic","email":"303394539@qq.com"}],"description":"Images viewer is a react component use in mobile website App, that function same as Weixin native viewer.","license":"MIT","readme":"# [中文文档](https://github.com/react-ld/react-wx-images-viewer/blob/master/README-cn.md)\n\n# Description\n[react-wx-images-viewer](https://github.com/react-ld/react-wx-images-viewer/tree/master) is a React\ncommon component use for images viewer *in mobile device*. It's function look like WeChat App previewImage.\nFinger drag left or right to preview each image. Two finger drag zoom in or zoom out the image.\n\n# Install\n```shell\nnpm install --save react-wx-images-viewer\n```\n\n# dependence\nversion 0.0.1 -> React ^15.5.4\n\nversion ^1.0.0 -> React ^16.0.0\n\n# Example\n- [demo1](https://react-ld.github.io/react-wx-images-viewer/index.html)\n\n# How to use\n```js\nimport WxImageViewer from 'react-wx-images-viewer';\nclass App extends Component {\n\n  state = {\n    imags: [\n      require('./assets/2.jpg'),\n      require('./assets/1.jpg'),\n      require('./assets/0.jpg'),\n      require('./assets/3.jpg'),\n      require('./assets/4.jpg'),\n    ],\n    index: 0,\n    isOpen: false\n  };\n\n  onClose = () =>{\n    this.setState({\n      isOpen: false\n    })\n  }\n\n  openViewer (index){\n    this.setState({\n      index,\n      isOpen: true\n    })\n  }\n\n  render() {\n    const {\n      imags,\n      index,\n      isOpen\n    } = this.state;\n\n    return (\n      <div className=\"app\">\n        <div className=\"img-list\">\n          {/*直接打开*/}\n          <button onClick={this.openViewer.bind(this, 0)}>点击打开图片</button>\n          {\n            this.state.imags.map((item, index) => {\n              return <div className=\"img\" key={item}>\n                <img src={item} alt=\"\" onClick={this.openViewer.bind(this, index)} width=\"100%\" height=\"auto\" className=\"\"/> \n              </div>\n            })\n          }\n        </div>\n        {\n          isOpen ? <WxImageViewer onClose={this.onClose} urls={this.state.imags} index={index}/> : \"\"\n        }\n      </div>\n    )\n  }\n}\n\nexport default App;\n```\n\n# API：\n| Property | Description | Type | default | Remarks |\n| --- | --- | --- | --- | --- |\n| maxZoomNum | max zoom in times | Number | 4 |  |\n| zIndex | the depth of the layer | Number | 100 |  |\n| index | show which image in urls array when open | Number | 0 | |\n| gap | the gap between images | Number | 10 | unit is pixel |\n| urls | images url array | Array | | suggest the array length do not more than 10 |\n| onClose | handle close function | Function | | must remove WxViewer from current render and other sepcial logic |\n| loading | DIY loading style | component | WxImageViewer default [Loading](./src/components/Loading.jsx) | TODO |\n| pointer | DIY pointer | component | WxImageViewer default [Pointer](./src/components/Pointer.jsx) | TODO |\n\n# Reference\n- [react-modal](https://github.com/reactjs/react-modal)\n- [react-viewer-mobile](https://github.com/infeng/react-viewer-mobile/)\n- [react-image](https://github.com/mbrevda/react-image)","readmeFilename":"README.md"}