{"_id":"react-fullscreen-image","_rev":"3-b077fb65144b04cda742ad295e5e2684","name":"react-fullscreen-image","dist-tags":{"latest":"0.0.3"},"versions":{"0.0.1":{"name":"react-fullscreen-image","version":"0.0.1","description":"An accessible, fast, and animated fullscreen React image viewer.","keywords":["react","hooks","animation","javascript","dom","css"],"main":"lib/index.js","repository":{"type":"git","url":"git+ssh://git@github.com/timc1/react-fullscreen-image.git"},"author":{"name":"Tim Chang","email":"timchang.tcc@gmail.com","url":"https://timcchang.com"},"license":"MIT","scripts":{"build":"rm -rf ./lib && tsc && cp ./src/fullscreen.css ./lib"},"peerDependencies":{"react":"^16.8.x","react-dom":"^16.8.x","typescript":"^3.3.3333"},"devDependencies":{"@types/jest":"24.0.11","@types/node":"11.12.1","@types/react":"16.8.10","@types/react-dom":"16.8.3"},"gitHead":"4b2ec627c848828bbd0d7ed05d463b8712bc5fa2","bugs":{"url":"https://github.com/timc1/react-fullscreen-image/issues"},"homepage":"https://github.com/timc1/react-fullscreen-image#readme","_id":"react-fullscreen-image@0.0.1","_nodeVersion":"11.10.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-o89bLXyXhIzB2W8n3PxfbslApRN5iM97pTlJ2H7rKmjOarwDS1Ujwm/jdT8cFx3B+Ly7tZc8z7YbQyXTURgvFw==","shasum":"ae2cd85f645fe9048c9581f7e2f9987ff08dc32b","tarball":"https://registry.npmjs.org/react-fullscreen-image/-/react-fullscreen-image-0.0.1.tgz","fileCount":41,"unpackedSize":19463361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJco+rDCRA9TVsSAnZWagAA5/kQAIdILkaQsNz3U3H0gaKX\nowGcnJDBI8k1V927yVeFAQQlpwOzjZdTDk8wlyNUIjfkBjey8lNm1vBbrFQx\nvB/O3L4s9d4OvUTpOdxJkEvkB4zSpC7PjmDqgbriYiY6QE1HB6ufqVAlQsTX\nF2+0wgn4jEA/bgqHVUNz7SjWE6FYizrVgrPFYVjBw4dfoDAXENznVGq48/ng\n8zOtRxoHHnF+U04puDAv4TXH0pfeR7uET2BB6OLYXPInvfx9jP9y01ufkJor\nYSjDI1K377vCwyClaOGPPbfpGeAc156/ZQ4gnX6KORzF6ap1gy/REitgO2P5\nmurbu+VgaDURdGGCtw0RpQ+wlCTFtnfprdhDBqwlmQvNgzeaBzaMQZ7+/aKD\ns1sAsPjvkLVxnZinJ1tpb7SqKhqgXZ7l+hp2DYRpBY7NnY4bf8s+BT3bU64N\nVpEZqNvfzohoF/7pfSVEK7ggw7W+VojXAuNerhzIWP0b1cJhVx6hwHSyAEVb\nfcEhJPS8Q5rNlg3GDmcEBYL/a43BL/HLqTMjtdKBdRWKmXxtuKllKw08ezfT\ni885EEZ0XTqObM8DlgGt71eGPF9G4q+69wIfAqLS2x943VPYx27O8FguAs1n\nbY6gQufCMCqOulK6no4YLb1DvjgtWgslbim82K/hTG1YIjF6+0WW/n867CCU\n61kU\r\n=Qc26\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2wlNawv2YUcAB0r2DiOJBZ1Nv2+c0l1WuibgGYQmD/gIgP9DlpE05g6EiMPYAyd7ad7/qvd9caBgSHwCKYUsQ5po="}]},"maintainers":[{"name":"timcchang","email":"timchang.tcc@gmail.com"}],"_npmUser":{"name":"timcchang","email":"timchang.tcc@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-fullscreen-image_0.0.1_1554246338215_0.13675732040982758"},"_hasShrinkwrap":false},"0.0.2":{"name":"react-fullscreen-image","version":"0.0.2","description":"An accessible, fast, and animated fullscreen React image viewer.","keywords":["react","hooks","animation","javascript","dom","css"],"main":"lib/index.js","repository":{"type":"git","url":"git+ssh://git@github.com/timc1/react-fullscreen-image.git"},"author":{"name":"Tim Chang","email":"timchang.tcc@gmail.com","url":"https://timcchang.com"},"license":"MIT","scripts":{"build":"rm -rf ./lib && tsc && cp ./src/fullscreen.css ./lib"},"peerDependencies":{"react":"^16.8.x","react-dom":"^16.8.x","typescript":"^3.3.3333"},"devDependencies":{"@types/jest":"24.0.11","@types/node":"11.12.1","@types/react":"16.8.10","@types/react-dom":"16.8.3"},"gitHead":"86ed2c0759124f637d9f9d58722d5d735940c8ab","bugs":{"url":"https://github.com/timc1/react-fullscreen-image/issues"},"homepage":"https://github.com/timc1/react-fullscreen-image#readme","_id":"react-fullscreen-image@0.0.2","_nodeVersion":"11.10.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-FWXZBNoPlcHIdZk98gT6Xp9cWtJFQp/X93kqpiI+TaDhji7cmJTpofIQp5iyetlkiNKZR+K11i4ehYABbaEKJA==","shasum":"927d40503e50760b136450fbe23851ff3af7b18d","tarball":"https://registry.npmjs.org/react-fullscreen-image/-/react-fullscreen-image-0.0.2.tgz","fileCount":42,"unpackedSize":19464430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJco+zcCRA9TVsSAnZWagAA4goP/jEkTZgAm5L4U82dZS+U\nF9wso+TgTSX+l2mwHshNZQ3UZLKMNMApcObHAwADo2UHyO1ekHK9m6mtEML0\nZ0JpKuUr5okLo0ZQ2gCV1AVNsJC66U2HH6BfPLY/JFq8847wo2lzfKcLQqcQ\nnt9MKnylQGbidY9TN+D6EhdC2JgxCmt62A0hthGZd0TY5iAZiGvtN1uoFu4J\n8av+zM/S1STHhIuAdsnrdeNvr0reOxBcjYZM+9T250zd4gq4nfrXiNnTu18N\nHMn/5daG3xRB7u6MBrqhSAnfh66+TGxxGto9D/RizBPE86xMP23FVNWAEQt0\nOgfktgBQqLPg7WP4C/IW7pJMTIkSigPdPnxVra7JahLG+cZRY2L31N8Fe0AG\nL30Xk6DvmAvRvEcU+rWywizb3+7Mmjaaue2MDezKEC4mLQpu03Dz+M44LqAs\nFTBl1AkziXr68nk170NzhiLEBFB2cZ62+3Y+eGqnBpUV9bTP5tzFxzWm0v8d\naGFJHb1vOtR22SsRlfdW0khTf22oiahEpDQ2YR//pdyUZBfhqhryMWvT6RY3\n2rsioIO4Q8ViU8wgVp4GAdnHWb9CQsLut7InKvERUMk67g0ZJtTcYx0Ng4ME\n3S0iF5cqjJM0XvtM4MPZmq4w7ZwbV8xFyfbCGKYJDmMkGeNUzG8S9/ML2ksH\nOxjk\r\n=vRvV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICZqKzFudAcTq2fhDyQhXaZ32jSic2z52w7t1ge42tPQAiAXJeaslWVJVNYh4hdiXAbsOVPBzuLEbdc/aPfFwkWOOQ=="}]},"maintainers":[{"name":"timcchang","email":"timchang.tcc@gmail.com"}],"_npmUser":{"name":"timcchang","email":"timchang.tcc@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-fullscreen-image_0.0.2_1554246875296_0.24581853832711453"},"_hasShrinkwrap":false},"0.0.3":{"name":"react-fullscreen-image","version":"0.0.3","description":"An accessible, fast, and animated fullscreen React image viewer.","keywords":["react","hooks","animation","javascript","dom","css"],"main":"lib/index.js","repository":{"type":"git","url":"git+ssh://git@github.com/timc1/react-fullscreen-image.git"},"author":{"name":"Tim Chang","email":"timchang.tcc@gmail.com","url":"https://timcchang.com"},"license":"MIT","scripts":{"build":"rm -rf ./lib && tsc && cp ./src/fullscreen.css ./lib"},"peerDependencies":{"react":"^16.8.x","react-dom":"^16.8.x","typescript":"^3.3.3333"},"devDependencies":{"@types/jest":"24.0.11","@types/node":"11.12.1","@types/react":"16.8.10","@types/react-dom":"16.8.3"},"gitHead":"c56dbccb71380c92123cb843615cf1947fbc5e1c","bugs":{"url":"https://github.com/timc1/react-fullscreen-image/issues"},"homepage":"https://github.com/timc1/react-fullscreen-image#readme","_id":"react-fullscreen-image@0.0.3","_nodeVersion":"11.10.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-A4zXvDox4WConU/qUpOKUCoRmV2mGi2DPTXNhG9I1x+W8WWwpKQMmrbWjLAe/UudhtpJRlebkIC3sPU6IHR3Nw==","shasum":"c3986e1da0453616afa4d7ba50456b68fd6539c5","tarball":"https://registry.npmjs.org/react-fullscreen-image/-/react-fullscreen-image-0.0.3.tgz","fileCount":42,"unpackedSize":19464437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJco/DACRA9TVsSAnZWagAAH9kP/j0vcNUe8GkUxun0gZNv\nuNB8YptSWNSiXfe4aHTyccMN6gGO60UjUWi6Id50Z75NRnBzanM0G4NryhzI\nM3O+cguabgsrWFdi70EFWltMdt88JAaa2BIKpqNsv5jnCAI2qw7XH08MSy46\nC5an66kLyyFZ3GZeWhraKw2md/HEhWwQ2Lj4LA2beUPUh+2XznNtR7REe9Fl\nSp+9PIp118eVfIdPqm4nvheXfz0mt1jPm15EC+5p6e+JlS8Z4vKLmDgY10GV\nN55dtPT2BMiM9iz9C0Dsf4NSOH09BeZJnn1VBkCpidw4X9gvS0iESmUAMiZ8\nYONCLLbZhkNoTN5ux6YZX40RaL57Pr9BO8GAMyb4FDBmvZnqs+2x+Cwx0vxV\nZjOIGfG0rT3RLsGTlZT63Zfkk02rI0Rt1a7MVMzDRI2zbfpAviAOf2Mstm40\n8FYZ86d6iP5UwejVU1AAEvnN/xT6ErZNVSF7bVM0uwjZ9dsRkNsgxP39RZ4d\nXDlGhmEw9tCbbEx+B3fP6Esket9OgylOrSoAiHfdtuGVo1H3FdynTkkADmp5\n6FxVsboGL9Ns5LsTAoKO1lCv6MZ8AkzESkhLPfadQXjdaFjz9ySM8JUS7X9W\n/B/4swaFiiCr0+oU+Kd/CCqXXlxpQ/7RN3ElgDBJGgJppvhJSuf78UcGPbCz\ngbfa\r\n=1AP0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDFFMYF5mm/syKPmrOgWFSdNU96U7UwavFc60FxGZzv+AiEA1xDi1A8mi1pJROoz5L7PBtWEfhg8ZhqfJpHeNnVFPVk="}]},"maintainers":[{"name":"timcchang","email":"timchang.tcc@gmail.com"}],"_npmUser":{"name":"timcchang","email":"timchang.tcc@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-fullscreen-image_0.0.3_1554247871546_0.25707597600574394"},"_hasShrinkwrap":false}},"time":{"created":"2019-04-02T23:05:38.214Z","0.0.1":"2019-04-02T23:05:38.747Z","modified":"2022-05-14T11:24:09.070Z","0.0.2":"2019-04-02T23:14:35.820Z","0.0.3":"2019-04-02T23:31:12.203Z"},"maintainers":[{"name":"timcchang","email":"timchang.tcc@gmail.com"}],"description":"An accessible, fast, and animated fullscreen React image viewer.","homepage":"https://github.com/timc1/react-fullscreen-image#readme","keywords":["react","hooks","animation","javascript","dom","css"],"repository":{"type":"git","url":"git+ssh://git@github.com/timc1/react-fullscreen-image.git"},"author":{"name":"Tim Chang","email":"timchang.tcc@gmail.com","url":"https://timcchang.com"},"bugs":{"url":"https://github.com/timc1/react-fullscreen-image/issues"},"license":"MIT","readme":"<h1 align=\"center\">\n  React Fullscreen Image\n</h1>\n<p align=\"center\">\n  🔲\n  </p>\n<p align=\"center\" style=\"font-size: 1.5rem;\">\n  A simple, fast, and beautiful fullscreen React image viewer using CSS transforms & opacity.\n</p>\n\n<p align=\"center\">\n<img src=\"https://github.com/timc1/react-fullscreen-image/raw/master/demo.gif\" alt=\"demo\" />\n</p>\n\nYou've got a list of images that you want to allow users to click and expand into fullscreen mode.\n\nReact Fullscreen Image is a tiny library to render images that animate to fullscreen view when\nclicked.\n\n## Features\n\n- Only animates transform and opacity properties.\n- Keyboard event handlers (escape key, left/right arrow navigation).\n- Handles outer click — anywhere outside of image when clicked will zoom image to its original\n  position.\n- Scrolling (with requestAnimationFrame) to a set boundary will zoom image to its original position.\n\n## Usage\n\nReact Fullscreen Image uses [compound components](https://kentcdodds.com/blog/compound-components-with-react-hooks). All `<Image />` components nested within an `<ImageGroup />` will be navigatable when in fullscreen mode.\n\n```jsx\nimport { ImageGroup, Image } from 'react-fullscreen-image'\n\nconst images = [\n  'https://unsplash.com/photos/Bkci_8qcdvQ',\n  'https://unsplash.com/photos/hS46bsAASwQ',\n  'https://unsplash.com/photos/2VDa8bnLM8c',\n  'https://unsplash.com/photos/_LuLiJc1cdo',\n  'https://unsplash.com/photos/1Z2niiBPg5A',\n  'https://unsplash.com/photos/pHANr-CpbYM',\n  'https://unsplash.com/photos/pQMM63GE7fo',\n  'https://unsplash.com/photos/2VDa8bnLM8c',\n  'https://unsplash.com/photos/MBkQKiH14ng',\n]\n\nexport default function App() {\n  return (\n    <ImageGroup>\n      <ul className=\"images\">\n        {images.map(i => (\n          <li key={i}>\n            <Image\n              src={i}\n              alt=\"nature\"\n              style={{\n                position: 'absolute',\n                top: 0,\n                left: 0,\n                right: 0,\n                bottom: 0,\n                height: '100%',\n                width: '100%',\n                objectFit: 'cover',\n              }}\n            />\n          </li>\n        ))}\n      </ul>\n    </ImageGroup>\n  )\n}\n```\n\n## Installation\n\n```jsx\ngit clone https://github.com/timc1/react-fullscreen-image.git\n\ncd react-fullscreen-image/example\n\nyarn install\n\nyarn start\n```\n","readmeFilename":"README.md"}