{"_id":"react-360-view","_rev":"4-8b006ca58ba09f729f243f5c0bc08b4c","name":"react-360-view","dist-tags":{"latest":"0.1.3"},"versions":{"0.1.0":{"name":"react-360-view","version":"0.1.0","author":{"name":"Rajeev R. Gade","email":"rajeevgade@gmail.com"},"description":"A Simple and Beautiful 360 viewer for your product","repository":{"type":"git","url":"git+https://github.com/rajeevgade/react-360.git"},"license":"MIT","main":"./dist/index.js","private":false,"dependencies":{"@testing-library/jest-dom":"^4.2.4","@testing-library/react":"^9.3.2","@testing-library/user-event":"^7.1.2","acorn-jsx":"^5.2.0","react":"^16.12.0","react-dom":"^16.12.0","react-scripts":"3.4.0"},"scripts":{"test":"react-scripts test","eject":"react-scripts eject","build":"rollup -c","start":"rollup -c -w"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-core":"^6.26.3","babel-runtime":"^6.26.0","rollup":"^2.23.0","rollup-plugin-postcss":"^3.1.3","rollup-plugin-sass":"^1.2.2","rollup-plugin-typescript2":"^0.27.1"},"gitHead":"fcc132802c32232a9450818518a8d5876115866d","bugs":{"url":"https://github.com/rajeevgade/react-360/issues"},"homepage":"https://github.com/rajeevgade/react-360#readme","_id":"react-360-view@0.1.0","_npmVersion":"5.6.0","_nodeVersion":"8.11.1","_npmUser":{"name":"rajeevgade","email":"rajeevgade@gmail.com"},"dist":{"integrity":"sha512-61S6p/BcIjUn4B9gn8OcCHUGO5PTkKhnIIbQnccwlE0nKS0RRDOs+EIVVWTFvQpEwb6GG0sB4CLH8d33gah3VQ==","shasum":"eccd9a6b5d7a0f46c3d743a0552cc7148a8f8a18","tarball":"https://registry.npmjs.org/react-360-view/-/react-360-view-0.1.0.tgz","fileCount":5,"unpackedSize":87624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLBd8CRA9TVsSAnZWagAAd/oP/A8fc669ayjwqZQ8roaW\nFWI8IbGj0ner9BF1I2zG4dmGZ6s3w5PWrxKSpM7zSLBcV/FAmmiPLRX/hD1o\nIWp17TemAItp5C8fUvHswwzSqqJHtUNKIbf6PiUgI1j9adzfN7zyOKB62hzx\nhL9yI+uBMv/e99iLmaZ35HNVK1dM+N7L9+ONUOCjFPSp0U+7ws7HXnOCN/UM\n2oQnEqgiG8QAYFe+merXT+RLVT0x9EQTpZx7ymOUejl33ZVXQdEM3VXePIfj\nTDY+1/ByX1XE2GuPhDO86ivYNoxqiPNgrMj6gXyr3aqR+gqfDY360cAf6dRS\np7H7J3A5WirrG5vLaVnmUuWfaSuminP/ChTCOGxzFNFfgFsIzOXg0glyCm6i\nIuksJgPJu9aIlTRPWa67CapOFF/FaDIyipvtBOiFDKQguecz962ZG4IkLhAL\nXl46w5sKpWuquFhQ2gHtmwRQJX4nEFLIbZvb9JSfDpH8n6go9RJSEo/SjcOe\nyV3JVTWtDLlvsg4SDI9KbQgTAAS/TBQVttP63mwm2YcrymJkr/sZ278AGbDy\npKdU0exbRzfRkzGzdH/1oUGaJWjJewAOCGAdDBJ61uV1PTq0JThOaabHl+76\n3obvu9G6D6e2RjUVDgxyKCghBlINJmbRFizq6HInqVCOT1W0wVEn7Z4X4QLX\neL44\r\n=NF2c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCmdeKKBw7jdro5y2pckcpWxEvjQcxphW/c3QFKx2WKIwIgBt2C6vApQVxe2shBEFsTe/AZthglTLTugbNshhZ574M="}]},"maintainers":[{"name":"rajeevgade","email":"rajeevgade@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-360-view_0.1.0_1596725115674_0.2738648631458669"},"_hasShrinkwrap":false},"0.1.1":{"name":"react-360-view","version":"0.1.1","author":{"name":"Rajeev R. Gade","email":"rajeevgade@gmail.com"},"description":"A Simple and Beautiful 360 viewer for your product","repository":{"type":"git","url":"git+https://github.com/rajeevgade/react-360.git"},"license":"MIT","main":"./dist/index.js","private":false,"peerDependencies":{"react":"^16.12.0","react-dom":"^16.12.0"},"dependencies":{"@testing-library/jest-dom":"^4.2.4","@testing-library/react":"^9.3.2","@testing-library/user-event":"^7.1.2","acorn-jsx":"^5.2.0","react":"^16.12.0","react-dom":"^16.12.0","react-scripts":"3.4.0"},"scripts":{"test":"react-scripts test","eject":"react-scripts eject","build":"rollup -c","start":"rollup -c -w"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-core":"^6.26.3","babel-runtime":"^6.26.0","rollup":"^2.23.0","rollup-plugin-postcss":"^3.1.3","rollup-plugin-sass":"^1.2.2","rollup-plugin-typescript2":"^0.27.1"},"gitHead":"e7d7408f6a1e229c29c65c8546c5a1f3ebda8006","bugs":{"url":"https://github.com/rajeevgade/react-360/issues"},"homepage":"https://github.com/rajeevgade/react-360#readme","_id":"react-360-view@0.1.1","_npmVersion":"5.6.0","_nodeVersion":"8.11.1","_npmUser":{"name":"rajeevgade","email":"rajeevgade@gmail.com"},"dist":{"integrity":"sha512-OPkh/4eYmhp0BXLW5eiuKzw37aE49GZ1QnruW8RvMUi+qr21da29afUE+UsHOPbajKyjEdq6hp0eFZUm8oXJyg==","shasum":"4d55271f9aa91bfeca3b72ae2f51bba302ea8b58","tarball":"https://registry.npmjs.org/react-360-view/-/react-360-view-0.1.1.tgz","fileCount":5,"unpackedSize":87697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLBsKCRA9TVsSAnZWagAANN0P/0SLDwS5gPx0x5jNpxRZ\ns6qlw8P5ZcLCQlMldjihKe/5Hx6GH/G/uVaO/26F0c++fmxHb0B2tHRWhmca\nPTtods98/lh3wX1VRt/jGF0ZvAr0KXepod5a/cQJmdcP5scIpu69NmhWV63M\n/UfQUpQzVQJumx5x0mqazKXCQmnkXYX/at7ApPTsE099tyiD9UI4Sfu5c5hl\n1fTTiS4zgzlkge90cfVh/LA8lk/8HkkLc08BuvlLbInhHSZ9Qyx3RycF20Hk\nRKYnyMg/E65CZ8qxzh2HKq5ChbBmDZiAXaXpMdItE4VBKwbZNFQ9CYlElArM\nGTZw0DRYdtyhIMpOphn+7wKAH31AXswBsH0ddZLj/EiJTyKpv2mW5r/F65gu\nAKlUMPwH2D+GzV/u0c9DuU2gdQlN9Q9B8Qw+YmZ79IWzH7vvG486GrBHrfMF\n/LMfVa39YaZOOLT+d3qjgNLf47LdvsHBeWzofpPpzYLYhWhsNAm8Vn+BKVGj\n1KBCk2LOateNBdUPozHVFORkFTNraD3QpurUY20UEDxG/YmDK2LHhJiR48KN\nky1qG607CgAQk4FaShFF0lSJUCk3DJhNF2pqRsbUjzlUNAduTWJuyU1fBGVe\nNRQWE6enY0uTpsimibftalccdB9rUK1uog5AUZX8MOlZwyUBPxBtlXGP7Nkr\nBDYe\r\n=HxDr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC26/RE2uWCAeZlqaBbhBir4/MYhHWgqmCG+0sZUnlpBgIhAIP1889absMKXDo9IqIvKxZLUQy5aOe8Ciwmrs9taDWC"}]},"maintainers":[{"name":"rajeevgade","email":"rajeevgade@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-360-view_0.1.1_1596726025478_0.5244417965490247"},"_hasShrinkwrap":false},"0.1.2":{"name":"react-360-view","version":"0.1.2","author":{"name":"Rajeev R. Gade","email":"rajeevgade@gmail.com"},"description":"A Simple and Beautiful 360 viewer for your product","repository":{"type":"git","url":"git+https://github.com/rajeevgade/react-360.git"},"license":"MIT","main":"./dist/index.js","private":false,"peerDependencies":{"react":"^16.12.0","react-dom":"^16.12.0"},"dependencies":{"@testing-library/jest-dom":"^4.2.4","@testing-library/react":"^9.3.2","@testing-library/user-event":"^7.1.2","acorn-jsx":"^5.2.0","react":"^16.12.0","react-dom":"^16.12.0","react-scripts":"3.4.0"},"scripts":{"test":"react-scripts test","eject":"react-scripts eject","build":"rollup -c","start":"rollup -c -w"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/plugin-proposal-class-properties":"^7.10.4","babel-core":"^6.26.3","babel-runtime":"^6.26.0","rollup":"^2.23.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-postcss":"^3.1.3","rollup-plugin-sass":"^1.2.2","rollup-plugin-typescript2":"^0.27.1"},"gitHead":"cb773c442ca76eebe887ff65edd20fea744a64d2","bugs":{"url":"https://github.com/rajeevgade/react-360/issues"},"homepage":"https://github.com/rajeevgade/react-360#readme","_id":"react-360-view@0.1.2","_nodeVersion":"14.7.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-akrvkpgBCYtWbri+5q3xtzUw1b15p5xeNIsIVNkQ8sVcpdrY0/s9IGzPgerypRrjGQQ90yq5WewKLxZ60MyrPw==","shasum":"fc1cf61c76ec412b3e96780a91fabcc3dda5219e","tarball":"https://registry.npmjs.org/react-360-view/-/react-360-view-0.1.2.tgz","fileCount":5,"unpackedSize":92359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLCb3CRA9TVsSAnZWagAACMYP/jWKbpYwG1qdIWLOMu8o\n0LtFZIx3w3iLNUZWN2+Upys2xubt7sshvW+6OLTmFY1hrGaaMCG6zTPBHJB+\n8q1wtOap9AmERpcGQbwv68mRkYvNZzmSefB8TG8b5ar/1kV91V/Qr1mgn/gU\n9F1+47+N1Kj9t+NgPmmkb9uNCkKM0eP1zWL6SOG+DQdd0/rxgloyyxWnOqfR\n+5X9es6IeH5utMGn3ko4foWBtf/hFCd2BTA5eg+PoehvvvsLpcATMnNMmEVP\nxhActMz9oN2cqd3suHeijEgF6nsOFgmT/BxAl4vhROW/8JciRxf3ZslXcrw4\nU6BA29RvwYyv15RGONOVWFaHKgzra6NDl4w87n5aDIvWijzBKKRXfq7wOhrZ\n8YARJbXNGQP+PEe3zjaKhmBUxSZldAWF/9pUr90QNrE8txq0VfzR+EiPgWbc\nI9RcPlLEjFE3vht9l/zSVT2CpF/wgEa/0sTRXN9u7qIIsxpzuGbrpW9f7cwI\nJPncs7+xWmxiiL52K29KlDQB8V7yAegdIx1BcKNAi1asSk4QW/JZk6/epTmE\nXRe5zpVTtyvSpLPjsivJbuOMLYhw8AWsPnTmF2ELeYhcqIFkagONxFo1CJZw\nhle131RqDr7CGoeqLqEPY+Hmgmyhpp7XWhZT5oXgStnsQmCViVt5TeYe3XuW\neeZH\r\n=EEQY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDj/gS1At4AoGA1eQ4vtGRU0/cJ0yEDsiGhZxOVle7TsQIgfpxKzdL0VDX+sWftICmD0QN3cK9KJ6zXl/eRnChFzec="}]},"maintainers":[{"name":"rajeevgade","email":"rajeevgade@gmail.com"}],"_npmUser":{"name":"rajeevgade","email":"rajeevgade@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-360-view_0.1.2_1596729078840_0.7895373279651992"},"_hasShrinkwrap":false},"0.1.3":{"name":"react-360-view","version":"0.1.3","author":{"name":"Rajeev R. Gade","email":"rajeevgade@gmail.com"},"description":"A Simple and Beautiful 360 viewer for your product","homepage":"https://react-360.vercel.app/","repository":{"type":"git","url":"git+https://github.com/rajeevgade/react-360.git"},"license":"MIT","main":"./dist/index.js","private":false,"peerDependencies":{"react":"^16.12.0","react-dom":"^16.12.0"},"dependencies":{"@testing-library/jest-dom":"^4.2.4","@testing-library/react":"^9.3.2","@testing-library/user-event":"^7.1.2","acorn-jsx":"^5.2.0","react":"^16.12.0","react-dom":"^16.12.0","react-scripts":"3.4.0"},"scripts":{"start":"react-scripts start","build":"react-scripts build","test":"react-scripts test","eject":"react-scripts eject","build-c":"rollup -c","start-c":"rollup -c -w"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/plugin-proposal-class-properties":"^7.10.4","babel-core":"^6.26.3","babel-runtime":"^6.26.0","rollup":"^2.23.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-postcss":"^3.1.3","rollup-plugin-sass":"^1.2.2","rollup-plugin-typescript2":"^0.27.1"},"gitHead":"cba7437650cd54adcaf1eb6f3b723ddcffcf08f9","bugs":{"url":"https://github.com/rajeevgade/react-360/issues"},"_id":"react-360-view@0.1.3","_nodeVersion":"14.7.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-0/96pvFobe79xBGUmICT/Gyp24AucidxhaDAIBPvCrBMkRe8j+MwbtXsFqby3w0RgSV58684AaWmo4VzPQ5M1g==","shasum":"d75753b9eda8d746eb033d75694f453ad854731b","tarball":"https://registry.npmjs.org/react-360-view/-/react-360-view-0.1.3.tgz","fileCount":5,"unpackedSize":92483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLEdUCRA9TVsSAnZWagAAbwAQAIj0pG4qICfthZv9kywa\nOA+Xoaxje5EJ+FqY+SdCYVqiRmb8bDm+ZZ0HRQTd9gsZ35YOUKwEc9TFWpc4\nvNbS3kq+9TBy31GVPzfESklK4Omjn7r1nAwgsJ4QSTxNmsubxGvurJnnwDcw\na/2BQwiBL9MmzW+fqioPIGG/d9FNBGKjInUy7XH7Xgfy2STobKzxZd8P0hS+\nwhNZaZc8mkMp0IkQRgo7jnWUFrWYM1eaf3/W4FPvr/frcgJ3i2LUYTGhNHl6\nreV8qnyYjuXsGi/YitcPeANVx1kt1k8qAJ4LMsU7rhHykIxAIV0WmMvzYKYt\nTSlFCsgugPCE/Su6RGU+oZ9pQrHF2igkhdgtvms23/5xo+jk2T4V/FiP1kE9\n+AKW4Kr/Y08RlZ47MLV5wHXtlR+vIgUDBl0ggQJyS6tUjuSQ7pQCTqPWpuSq\n0OBYsQQSjCrHJpTyz2SSRp3MGmjdyWp51q6VdW7JlK+m7J1AfYceSGNDvP7M\nrmIcLDgreuT/hXAvRjuY1eR/qaEQQHqDdT0bHsaC0aWk6wsUZmV7g4wsNNRz\nZzB9nQnsvOwMyWgBQCGGVA2ov+ciIWi+GUqNmFuiRaATHRL16hWCa1ZHJXbG\nIT561Oisnbl4AxBTgFJ1yo/4A5oaoYxVgjoC7omc9EItx/tTIWgluZW70ycp\nZ69L\r\n=xDgL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBlvDbC3rTsOi50/5EQrWO8Ys+PAawtZqwdhQhLRPwuKAiEAyZi6BN215Nb3ORRIK7W5BZ+JVU65HQRjvIEO68RjQaY="}]},"maintainers":[{"name":"rajeevgade","email":"rajeevgade@gmail.com"}],"_npmUser":{"name":"rajeevgade","email":"rajeevgade@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-360-view_0.1.3_1596737363723_0.38063199784209645"},"_hasShrinkwrap":false}},"time":{"created":"2020-08-06T14:45:15.674Z","0.1.0":"2020-08-06T14:45:15.897Z","modified":"2022-05-14T05:40:35.818Z","0.1.1":"2020-08-06T15:00:25.612Z","0.1.2":"2020-08-06T15:51:18.935Z","0.1.3":"2020-08-06T18:09:23.867Z"},"maintainers":[{"name":"rajeevgade","email":"rajeevgade@gmail.com"}],"description":"A Simple and Beautiful 360 viewer for your product","homepage":"https://react-360.vercel.app/","repository":{"type":"git","url":"git+https://github.com/rajeevgade/react-360.git"},"author":{"name":"Rajeev R. Gade","email":"rajeevgade@gmail.com"},"bugs":{"url":"https://github.com/rajeevgade/react-360/issues"},"license":"MIT","readme":"# react-360-view\r\n- A Simple and Beautiful 360&deg; Product Viewer built on React\r\n\r\n### [Click here for Vue version](https://github.com/rajeevgade/vue-360)\r\n\r\n## Demo\r\n\r\n![Preview](https://www.techsolate.com/vue-360-viewer/demo.gif)\r\n\r\n[Demo](https://react-360.vercel.app/) | [Documentation](https://rajeevgade.github.io/react-360)\r\n\r\n[Example](https://github.com/rajeevgade/react-360/blob/master/src/App.js)\r\n\r\n## Features\r\n\r\n- 360&deg; View\r\n- Zoom\r\n- Pan\r\n- Autoplay (Loops)\r\n- Full Screen Mode\r\n- Spin Direction\r\n- Image Caching\r\n- Mobile Responsive (Under works)\r\n- Touch Events (Under works)\r\n\r\n\r\n## Installation\r\n```\r\nnpm install react-360-view\r\n```\r\n\r\n## Config\r\n\r\n```\r\nimport ThreeSixty from 'react-360-view'\r\n```\r\n\r\n## Example\r\n\r\n```\r\n<ThreeSixty\r\n    amount={36}\r\n    imagePath=\"https://scaleflex.cloudimg.io/width/600/q35/https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/demo/chair-360-36\"\r\n    fileName=\"chair_{index}.jpg?v1\"\r\n/>\r\n```\r\n### Adding a Header\r\n```\r\n<div class=\"v360-header text-light bg-dark\">\r\n    <span class=\"v360-header-title\">36 Images - Autoplay (1 loop) - Reverse Spin</span>\r\n    <span class=\"v360-header-description\"></span>\r\n</div>\r\n```\r\n\r\n### Icons\r\n- The icons used in the demo are from fontawesome. Add the following in your header to display the icons.\r\n```\r\n<link href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css\" rel=\"stylesheet\" type=\"text/css\">\r\n```\r\n\r\n## Props\r\n\r\n| Name | Type | Description | Required | Default Value |\r\n| --- | --- | --- | --- | --- |\r\n| amount | Number | Number of images | Yes |\r\n| imagePath | String | Path to your image | Yes |\r\n| fileName | String | File name format | Yes |\r\n| spinReverse | Boolean | Reverse Spin | Optional | false |\r\n| autoplay | Number | Autoplay your images | Optional | 24 |\r\n| loop | Number | Number of loops you want to autoplay | Optional | 1 |\r\n| boxShadow | Boolean | Apply Box Shadow Background | Optional | false |\r\n| buttonClass | String | Apply Styling to Buttons | Optional (light/dark) | light |\r\n| paddingIndex | Boolean | Apply Leading Zero to Image Index | Optional | false |\r\n\r\n## Buttons \r\n\r\n(In order from left to right)\r\n\r\n- Play/Pause\r\n- Zoom In\r\n- Zoom Out\r\n- Pan / 360&deg; Mode\r\n- Move Left\r\n- Move Right\r\n- Reset Position\r\n\r\n\r\n## Roadmap\r\n\r\n- Hotspots\r\n- Lazyloading\r\n- Custom CSS Classes\r\n- Custom Buttons\r\n- And a few more ...\r\n\r\n## Credits\r\n\r\n- [vue](https://reactjs.org/)\r\n- [core-js](https://github.com/zloirock/core-js)\r\n- [Cloud Image](https://www.cloudimage.io/)\r\n","readmeFilename":"README.md"}