{"_id":"@africasokoni/react-image-viewer","_rev":"3-00aca4c954dcead937342fdf2ff43001","name":"@africasokoni/react-image-viewer","dist-tags":{"latest":"0.0.3"},"versions":{"0.0.1":{"name":"@africasokoni/react-image-viewer","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-image-viewer.git"},"author":{"name":"Felix Nyamweya","email":"omburaafelix@gmail.com"},"license":"MIT","scripts":{"build":"sudo rm -rf ./lib && tsc && sudo cp ./src/fullscreen.css ./lib"},"peerDependencies":{"react":"^17.0.1","react-dom":"^17.0.1","typescript":"^3.3.3333"},"devDependencies":{"@types/jest":"^24.9.1","@types/node":"^11.15.54","@types/react":"^17.0.7","@types/react-dom":"^16.9.13"},"gitHead":"8e102221218ae57f6827b0f822a27cfb79000dd3","bugs":{"url":"https://github.com/timc1/react-image-viewer/issues"},"homepage":"https://github.com/timc1/react-image-viewer#readme","_id":"@africasokoni/react-image-viewer@0.0.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-9qYjhIrjKzIeDaQLmB1k5X38gj2oGrlEGf+6qnQ+SQfq4o2ueeFv09y0wyK0drq3JJmGvoThnqr5fgCnLuoApw==","shasum":"e668465709f43df46510aa5063cbbd09e37f7ca4","tarball":"https://registry.npmjs.org/@africasokoni/react-image-viewer/-/react-image-viewer-0.0.1.tgz","fileCount":16,"unpackedSize":14588297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwGrACRA9TVsSAnZWagAARAQP/1Uz9q/ZkjSAA7bUJtYE\ni8/8wIu3gy5xbm/hDckmzd+bx4uhZ6hesS7cI29dOudrGg7MFNqa1k1Ht5bU\nAQh41gG2vL8WbA8Tq/F+FlL2RduMb4VdZCtMqTAvH7kss8IN+qNDqBk2L/6g\nKxpffPLxTtnbVZWexkSA1qcZazt+tCRE2KeP3rvHGiJLqh6LABSppk93uVIi\ngQBUFDsOITBguV8Dy1TGEdR72/4HNbFRlZXY3LO/0+WUNisI6FqlGMeq0c2p\nclYguAdcBMNGIB1TeP0s8s6Okcak1lM60MXR7KqMy/QJ1DLqf96OfS2NYtX+\n+8Gu89HRtXOFxqwd9XsZQM3JzpBybHXghP6AUQStAyacpXdUYtqa4aBxtwmA\nPD3TU1DIGc7i2dnKcr+Jc/X1J2EkJLqL9d28GKmfPxwqStGHp/H7S6u2fth3\n+Aafwj4hrd9sbeXXyWlbblKI3zbUzW1EmJodCC2ZhiZJnh6iP4QMizMNaVPW\novIWOV5sMm5Y1wFP3RVIb8YmgVsHOjftjuRXcZv3vFNJ2g2fA1x4HdiaogmK\nmPl2f5rY3MzRGGVJLelGCP8gPkNeo8WS5AaNnUkFTWfEffXOkH1Q83VFlnGR\n0sISVWcs5NbouOQLpwonnZMVaJ+EWtHeHnXumODIYwSDPuznAmSLHx0QuFRs\nA5+W\r\n=nix+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1/e+AzkFnqxiPRWP9TIvQHTsUiN7Pn/TQ+LZSTw8CuwIhANd9jrpWO0KahaXLoXPoyBrs2RJf1XvwVUAFXGF4BDrJ"}]},"_npmUser":{"name":"felixnyamweya","email":"felixombura@gmail.com"},"directories":{},"maintainers":[{"name":"gr1d99","email":"gideon.kimutai.kim@gmail.com"},{"name":"felixnyamweya","email":"felixombura@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image-viewer_0.0.1_1623222975528_0.9989270164544617"},"_hasShrinkwrap":false},"0.0.2":{"name":"@africasokoni/react-image-viewer","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-image-viewer.git"},"author":{"name":"Felix Nyamweya","email":"omburaafelix@gmail.com"},"license":"MIT","scripts":{"build":"sudo rm -rf ./lib && tsc && sudo cp ./src/fullscreen.css ./lib"},"peerDependencies":{"react":"^17.0.1","react-dom":"^17.0.1","typescript":"^3.3.3333"},"devDependencies":{"@types/jest":"^24.9.1","@types/node":"^11.15.54","@types/react":"^17.0.7","@types/react-dom":"^16.9.13"},"gitHead":"23d0274a8fc004e2e61cffc9d21cd4cbc010dcef","bugs":{"url":"https://github.com/timc1/react-image-viewer/issues"},"homepage":"https://github.com/timc1/react-image-viewer#readme","_id":"@africasokoni/react-image-viewer@0.0.2","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-muwhnuc3V3MO8IczmY+zjjF2uPgVBLzh7qpam7/S1tiDUC/v8HSpiL7d9VHAS7bgAmu6znrY84R+DhNn559urA==","shasum":"00059fc51ff2422b4779261a7804cb4d872ee509","tarball":"https://registry.npmjs.org/@africasokoni/react-image-viewer/-/react-image-viewer-0.0.2.tgz","fileCount":16,"unpackedSize":14588307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwGvsCRA9TVsSAnZWagAAAecP/jVLKcTWKAUzpM4Umajc\nmyXCMGnrq1GasghkLd0Qqz0Vcgbsrh3Nx6GB8GD01Ba0uJVLP8SllPrLMrWj\nke3SIiHAqvDc3hTWfLM/4KaSZ2p3cHSTqz2RAPt2mxhACFPK/y9rWV6RC+PA\nIfLwp9Um+EDqEqLGyhUj/rQBgJ4R5UremIH2qv7GSAg21DOg/wNjCxf7RUYl\nPBSIITZNGvoxgAi8Cy19OCJiJIoiukWYpPfN9N41yoa6jZBGIAKk+jw8cOTk\n0h9OUfHxt0fJbDFEW82zPvGGS5vEfThS/zhBDyqEGMtRdbInQFxbpUk8eiRU\n9vfng/DbAaULWw3K8sPm4+I5CwtdafMCMC7cIgTTuhf4NAevo86Ktw8sPjU8\nHNieUvRf6Fb/ikaVunzjnwIgpuXd0SMhbc2dcNUaDgFIMuUMnX4phanLy7Er\nTI/qyB7DArwTHUW4OtUkhKzKJQGERz2T4E+WZbpw1/QQcPykd2Nx/VLTaN0U\nBSRcPooAEly322HIjywPz+b0k12Vdv0yuQ6NaAfa4E1byfSsc5Kq3G1WREcf\nEHjkOVfF/zl3bJHXNKjCA7S0IEfIy5eDkUKmOQFezsheeyPo1JDbrTK39mve\n53drLy4+sj9dkrtQ09GPxLwPoHQgCQ+rdtIDABUKIvJGiCJ4L2n+Qs0/FtSh\ntcWC\r\n=iS8C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDi0pG1LD9x3nEtuJCsU9p+peCEn1QJZETC5A+1vL5u6AIhAOIwa/litP6l/7nSF/eKm2OoH+ggpdYfQR4uiPxgDyhE"}]},"_npmUser":{"name":"felixnyamweya","email":"felixombura@gmail.com"},"directories":{},"maintainers":[{"name":"gr1d99","email":"gideon.kimutai.kim@gmail.com"},{"name":"felixnyamweya","email":"felixombura@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image-viewer_0.0.2_1623223276099_0.33668077784877726"},"_hasShrinkwrap":false},"0.0.3":{"name":"@africasokoni/react-image-viewer","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-image-viewer.git"},"author":{"name":"Felix Nyamweya","email":"omburaafelix@gmail.com"},"license":"MIT","scripts":{"build":"sudo rm -rf ./lib && tsc && sudo cp ./src/fullscreen.css ./lib"},"peerDependencies":{"react":"^17.0.1","react-dom":"^17.0.1","typescript":"^3.3.3333"},"devDependencies":{"@babel/core":"^7.14.3","@babel/preset-env":"^7.14.4","@types/jest":"^24.9.1","@types/node":"^11.15.54","@types/react":"^17.0.7","@types/react-dom":"^16.9.13"},"gitHead":"e0bda93aab4fa9bc93517ca6305e955eb2f42f23","bugs":{"url":"https://github.com/timc1/react-image-viewer/issues"},"homepage":"https://github.com/timc1/react-image-viewer#readme","_id":"@africasokoni/react-image-viewer@0.0.3","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-q5OZX48kwkZCHtbJ+WVPgKGmS5NjdobQMyviGRzygC9ijU6nWpnrL8ynOVI1vAFzMGRx8FMchjhURjR4thdM+w==","shasum":"a20099f1346861c2de6981be2424c2588551aa05","tarball":"https://registry.npmjs.org/@africasokoni/react-image-viewer/-/react-image-viewer-0.0.3.tgz","fileCount":17,"unpackedSize":14588413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwHA0CRA9TVsSAnZWagAAoNEQAIPWJS6g5Uw1jpmf95rr\nFj954Qjy49KkaArB6ECI/RInUplfF69mnruIAaLDlD+E+TcKolUvYjBA28x9\nJv4yXUD1kk3EtRydZ1xbgFQl19plt+ckoW1F+MgAaJzfdClYJoeiM2ogBV4X\nzDVopjYkP+v1Ko/DLahZRfHufI3OwR4l0j6i7eL3+QCff4v0pSf2ienQ9Xlw\n7BEZC9TpA3mJAGWFl46LpaineePlmyqQX1cTnSk8IpG0CIC4+1ph5m8h4DCR\n8S7aldIGDolfW9WdvTLseiuyOGRxgybMa2uw/FQDsU4u4FjK8NDRubWy7f5+\ni04G9UBfVXPQDa6acaiARAjDuyu6RZb2K3pGhUoPvtdcCBJjObETCMOg8ar9\nOgNya+LfHVpVuV2bL7os3NAzlnE/wK5E9c7FMB78HEg56ORXi+zQNhGEqlZK\nkAmfsK0s64GYvaATomg5DMLMH4gunHEg7/KuxemTH4vH7Klx5UALdkzcD4J6\njFZVuvkgaPEDC3EenmCCyVLr3pEgTF/y7CEQ8ItUl+fwnf6RXEEDkZ6iYtwh\nSXfvmULmay+7LTgr1aCUmXYEFVW66cKI0V9/+baskCHfJOCzyH7glt3xERGn\ni6kZzu+WNm2GMqwQ6KE+gWG10EiPT4egO16YnyRdF+wEUMLkVg7AQm89YNsr\ny78Y\r\n=5/N+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBHbRa7yV9/t27i138VMMbvELpqrWG4/x3MYfqfX8eFTAiB86xsLRv1dS2m5dLuBiqHiNEtr3crVYmIBNfm87jIGgA=="}]},"_npmUser":{"name":"felixnyamweya","email":"felixombura@gmail.com"},"directories":{},"maintainers":[{"name":"gr1d99","email":"gideon.kimutai.kim@gmail.com"},{"name":"felixnyamweya","email":"felixombura@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image-viewer_0.0.3_1623224372528_0.8912523067375704"},"_hasShrinkwrap":false}},"time":{"created":"2021-06-09T07:16:15.192Z","0.0.1":"2021-06-09T07:16:16.044Z","modified":"2022-04-04T11:51:24.658Z","0.0.2":"2021-06-09T07:21:16.651Z","0.0.3":"2021-06-09T07:39:32.942Z"},"maintainers":[{"name":"gr1d99","email":"gideon.kimutai.kim@gmail.com"},{"name":"felixnyamweya","email":"felixombura@gmail.com"}],"description":"An accessible, fast, and animated fullscreen React image viewer.","homepage":"https://github.com/timc1/react-image-viewer#readme","keywords":["react","hooks","animation","javascript","dom","css"],"repository":{"type":"git","url":"git+ssh://git@github.com/timc1/react-image-viewer.git"},"author":{"name":"Felix Nyamweya","email":"omburaafelix@gmail.com"},"bugs":{"url":"https://github.com/timc1/react-image-viewer/issues"},"license":"MIT","readme":"<h1 align=\"center\">\n  React Image Viewer\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/sokoni-online/react-image-viewer/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```jsx\nimport { ImageGroup, Image } from '@africasokoni/react-image-viewer';\n\nconst images = [\n  'some_image_url',\n  'some_image_url',\n  'some_image_url',\n  'some_image_url',\n];\n\nexport default function App() {\n  return (\n    <ImageGroup>\n      <ul className='images'>\n        {images.map((i) => (\n          <li key={i}>\n            <Image src={i} alt='nature' />\n          </li>\n        ))}\n      </ul>\n    </ImageGroup>\n  );\n}\n```\n\n## Installation\n\n```jsx\ngit clone https://github.com/sokoni-online/react-image-viewer.git\n\ncd react-fullscreen-image/example\n\nyarn install\n\nyarn start\n```\n","readmeFilename":"README.md"}